自定义角度指令:如何监视范围更改

时间:2016-03-07 21:59:51

标签: angularjs

我正在编写一个自定义指令,其范围内包含一个字段。该字段是一个包含值的数组的字典。

我希望该指令对此字段所做的任何更改做出反应:新条目,列表中的其他值等等......

我只想弄清楚原因:

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

这是我的脚本的简化版本,我只在子指令中执行一些日志记录。当修改字典上的按钮时,没有任何事情发生:



<!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>
&#13;
&#13;
&#13;

我曾尝试使用$ watch,$ watchCollection,深度观看,但它似乎没有做到这一点。

1 个答案:

答案 0 :(得分:2)

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

MonetaryFormats.getAmountFormat(Locale.getDefault()).format(Money.of(source.getValue(), source.getCurrency().getUid()))