如何從指令內部觀察變量的變化？

Question

我有一個這樣的自定義指令：

 angular.module('client.core.directives')
     .directive('containerlayout', function () {

         function link(scope, el, attr) {
            scope.$watch(['xdim', 'ydim', 'numOrder'], function () {
                    console.log("Watch Xdim/Ydim/numOrd change");
                    // do something when these changesd
                }, true);
            scope.$watch('labels', function (labels) {
                    // do something when labels array changes
                }, true);

            } 

         return {
             link: link,
             restrict: 'E',
             scope: { geometry: '=geometry', xdim: '=xdim',
               ydim: '=ydim', numOrder: '=numorder', labels: '=labels',
               states: '=states', emptyToSkipped: '=emptytoskipped' }
    };

我有以下聲明：

   <containerlayout geometry="rect" xdim="cont.xdim" 
     ydim="cont.ydim" numorder="1" labels="cont.labels"
     states="cont.states" emptytoskipped="emptytoskipped" 
     class="ng-isolate-scope"></containerlayout>

但是當我更改時，比如說$ scope.cont.xdim或其他一些變量，什么也沒有發生，並且手表沒有觸發。

請注意，xdim和ydim是整數，標簽是數組。

我應該如何在指令中聲明東西，以便它可以監視變量？ 是否需要先在控制器中初始化它們才能成功工作？ 如果可能，我需要保持隔離狀態。

Answer 1

$watch('propertyName', func)僅$scope.propertyName一個$scope.propertyName 。

如果要監視多個屬性，則需要$watchCollection('[propertyName, anotherPropertyName]', func) 。

 scope.$watchCollection('[xdim, ydim, numOrder]', function (valuesArray) {
     console.log("Watch Xdim/Ydim/numOrd change", valuesArray);
 }, true);

labels觀察者是否在您的示例中觸發？ 應該的，因為它只是一個包含數組的屬性。