指令不工作的鏈接功能

今天我正在學習指令，我發現編譯和鏈接功能。但我試過我的鏈接功能不工作。指令不工作的鏈接功能

我的代碼是

<body ng-app="myModule" ng-controller="myController"> 
this is directive<br /> 
<input id="inputTextColor" ng-model="color" type ="text"/>{{color}} 
<br /> 

<hello> oldertext oldertext </hello> 
</body> 
<script> 
    var myModule = angular.module("myModule", []); 
    myModule.directive("hello", function() { 
     var directive = {}; 
     directive.restrict = 'E'; 
     directive.template = '<b>hi its me <span ng-transclude></span></b>'; 
     directive.transclude = true; 
     directive.compile = function (element, attributes) { 
      element.css('border', 'solid 1px black'); 

      var linkfunction = function ($scope, element, attributes) { 
       element.css('background-color', $scope.color); 
      } 
      return linkfunction; 
     } 

     return directive; 
    }); 

    myModule.controller("myController", function ($scope) { 
     $scope.color = "red"; 
    }); 
</script>

在這裏，我想，如果我在文本框寫colorname那麼我的指令應該更新，因爲文本框被綁定到我的scope.color的背景色。

來源

2014-06-22 Saurabh Mahajan

鏈接功能只被調用一次。如果你想在元素上的背景色爲每次設置範圍顏色範圍的顏色變化，你需要一個手錶：

var linkfunction = function ($scope, element, attributes) { 
    $scope.$watch('color', function(newValue) { 
     element.css('background-color', $scope.color); 
    }); 
};

工作例如：http://plnkr.co/edit/5IKY9Y4yNHMQ0vzfCR3u?p=preview

或者你可以簡單地使用NG式的指令模板，這將自動處理手錶：

directive.template = '<b ng-style="{\'background-color\': color}">hi its me <span ng-transclude></span></b>';

工作例如：http://plnkr.co/edit/uIPkyC5PSCsQZ5T5yELP?p=preview

來源

2014-06-22 08:59:01

非常感謝，這是我在找什麼。但記住，我仍然有一個問題，即每當我們的作用域更改時，編譯函數運行一次，鏈接函數函數就會運行。可能是我錯了，但我不清楚爲什麼我們需要在這裏添加手錶。根據我的理解，鏈接函數應該自動調用作爲我的範圍更新..請說明我。 –

你的理解是不正確的。鏈接功能在模板被克隆後執行一次。它不會在每次範圍更改時都執行。 –

謝謝@JBNizet。非常感謝。我將再次學習編譯和鏈接功能。再次感謝您寶貴的時間和寶貴的反饋意見... –

指令不工作的鏈接功能

回答

相關問題