自定义角度指令：如何监视范围变化

我正在写一个自定义指令，其范围内有单个字段。该字段是一个包含值的数组字典。自定义角度指令：如何监视范围变化

我想该指令对这一领域做出的任何变化做出反应：新条目，在列表中的附加价值，等等

我只是想弄清楚为什么：

当我更改字典中的值时，我的指令不反应。
指令甚至没有初始化字典的初始化。

这里是我的脚本，在这里我只在子directive.Nothing执行一些日志点击字典当按钮被修改情况的一个简化版本：

<!DOCTYPE html> 
 
    <html> 
 

 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Test</title> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
     <script> 
 
     angular.module("myApp", []) 
 

 
     .controller("myCtrl", function($scope) { 
 
      $scope.dico = {}; 
 
      $scope.dico["Paris"] = []; 
 
      $scope.dico["Paris"].push("Tour Eiffel"); 
 
      $scope.dico["Paris"].push("Champs Elysees"); 
 
      $scope.dico["London"] = []; 
 
      $scope.dico["London"].push("British Museum"); 
 

 
      $scope.addPOI = function() { 
 
      $scope.dico["Wellington"] = []; 
 
      $scope.dico["Wellington"].push("Botanic Garden"); 
 
      console.log($scope.dico); 
 
      }; 
 
     }) 
 

 
     .directive('subdirective', function() { 
 
      return { 
 
      restrict: 'E', 
 
      template: '<div><span ng-repeat="key in myDico">{{key}}</span></div>', 
 
      link: function(scope, element, iAttrs) { 
 
       console.log("test"); 
 
       scope.$watch("myDico", function(newVal, oldVal) { 
 
       console.log("watch!"); 
 
       console.log(newVal); 
 
       //update values... 
 
       }, true); 
 
      }, 
 
      scope: { 
 
       myDico: '=' 
 
      } 
 
      }; 
 
     }); 
 
     </script> 
 
    </head> 
 

 
    <body ng-app="myApp"> 
 
     <div ng-controller="myCtrl"> 
 
     <button ng-click="addPOI()"> 
 
      Add POI 
 
     </button> 
 
     <div> 
 
      <subdirective myDico="dico"></subdirective> 
 
     </div> 
 
     </div> 
 
    </body> 
 

 
    </html>

我试过使用$ watch，$ watchCollection，深入观察，但它似乎没有完成这项工作。

来源

2016-03-07 David

您认为如何将某些东西存储到作用域的“myDico”字段中？为什么？ –

您在指令定义对象中缺少范围绑定定义。

scope: { 
    myDico: '=' 
}

来源

2016-03-07 22:05:37 Prashant

请注意，即使已添加，代码也必须更改为' –

自定义角度指令：如何监视范围变化

回答

相关问题