在AngularJS的編譯功能中使用鏈接函數中的addClass與uisng addClass

任何人都可以解釋這段代碼中發生了什麼嗎？我明白link函數是在compile之後執行的。在AngularJS的編譯功能中使用鏈接函數中的addClass與uisng addClass

link vs compile.js是：

var app = angular.module('myApp', []); 
app.directive('highlight', function() { 
    return { 
     restrict: 'A', 
     compile: function ($element, $attr, $transclude) { 
      console.log('executed highlight'); 
      $element.addClass("highlight"); 
      //$element.addClass("red"); 

     } 
    }; 
}); 

app.directive('red', function() { 
    return { 
     restrict: 'A', 
     link: function ($scope, $element, $attr) { 
      console.log('executed red'); 
      $element.addClass("red"); 
      //$element.addClass("highlight"); 

     } 
    }; 
});

link vs compile.html是：

<!DOCTYPE html> 

<html ng-app="myApp"> 
    <head> 
     <script src="js/angular.js" type="text/javascript"></script> 
     <script src="js/link vs compile.js" type="text/javascript"></script> 

     <style type="text/css"> 
      .highlight{ 
       background:yellow; 
      } 

      .red{ 
       background: red; 
      } 

     </style> 

    </head> 
    <body> 

     <div ng-repeat="word in ['abc','def','ghi']" red highlight > 
      {{word}} 
     </div> 


    </body> 
</html>

作爲以上的結果是，div顯示與紅色的背景色爲link後來執行，從而它可以具有其中有意義覆蓋效果compile功能。但是，當我改變link vs compile.js這種形式：

var app = angular.module('myApp', []); 
app.directive('highlight', function() { 
    return { 
     restrict: 'A', 
     compile: function ($element, $attr, $transclude) { 
      console.log('executed highlight'); 
      //$element.addClass("highlight"); 
      $element.addClass("red"); 

     } 
    }; 
}); 

app.directive('red', function() { 
    return { 
     restrict: 'A', 
     link: function ($scope, $element, $attr) { 
      console.log('executed red'); 
      //$element.addClass("red"); 
      $element.addClass("highlight"); 

     } 
    }; 
});

現在div是red的背景下，這是爲什麼？如果link功能被執行後不應該div有yellow顏色？

代碼@http://plnkr.co/edit/RJtnuVHtZvgFAraG2eVa?p=preview

來源

2015-10-18 user4904589

要了解編譯和鏈接的區別：HTTP：//stackoverflow.com/questions/12164138/what-is-the-difference-between-compile-and-link-function -in-angularjs – Reza

@Reza該鏈接沒有解決這個特定的問題。 – user4904589

也許你的div有兩個類，所以你會得到意想不到的結果，嘗試添加高級類時刪除紅色類，反之亦然 –

這是一無所知angularjslink或compile，這是如果你更改類的順序有關css像

<div class="highlight red">my div</div>

沒有什麼會發生

<div class="red highlight">my div</div>

來源

2015-10-18 06:40:50 Reza

這甚至不是Angular相關的問題，而是它的css相關的問題。在style tag中編寫的red和highlight類的順序是有什麼區別。

<style type="text/css"> 
     .highlight{ 
      background:yellow; 
     } 

     .red{ 
      background: red; 
     } 
    </style>

如果上述被改變爲這樣的：

<style type="text/css"> 
     .red{ 
      background: red; 
     } 

     .highlight{ 
      background:yellow; 
     } 

    </style>

然後DIV匝yellow。

來源

2015-10-18 06:41:16 user4904589

可能你的div有兩個類，所以你會得到意想不到的結果，嘗試刪除紅色類時添加高亮類，反之亦然。請參閱下面的答案 –

你需要刪除其他類，你會得到不可預料的結果，因爲你已經添加了兩個類。這將解決該問題：

var app = angular.module('myApp', []); 
app.directive('highlight', function() { 
    return { 
     restrict: 'A', 
     compile: function ($element, $attr, $transclude) { 
      console.log('executed highlight'); 
      $element.removeClass("highlight"); 
      $element.addClass("red"); 

     } 
    }; 
}); 

app.directive('red', function() { 
    return { 
     restrict: 'A', 
     link: function ($scope, $element, $attr) { 
      console.log('executed red'); 
      $element.removeClass("red"); 
      $element.addClass("highlight"); 

     } 
    }; 
});

來源

2015-10-18 06:44:11

在AngularJS的編譯功能中使用鏈接函數中的addClass與uisng addClass

回答

相關問題