$ watch on complex expression

Question

我的直接中有一个孤立的范围变量，它是一个表达式，包含一起评估的其他几个变量的结果，如：

<my-directive is-my-expr="!var1 && var2"></my-directive>

指令的定义类似于：

app.directive('myDirective', function () {
    return {
        restrict: 'E',
        scope: {
           isMyExpr: '='
        },
        template: '<span>{{ isMyExpr ? "True" : "False" }}</span>',
        link: link
    };

    function link($scope) {
        $scope.$watch('isMyExpr', function (newValue) { $scope.isMyExpr = newValue; });
    }
});

但是，更改var1或var2的值不会更改指令的显示结果。我怎样才能做到这一点？

Answer 1

首先，您不需要设置$watch来手动更新指令中的$scope.isMyExpr。实际上，如图所示，您的手表是多余的，因为只有在初始化时以及值发生变化时才会调用侦听器功能。

我建议更改为使用＆符号（&）绑定隔离范围属性。这将为您的作用域提供一个$scope.isMyExpr()函数，该函数将评估标记中指定的表达式的结果。

＆＃13;

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.var1 = $scope.var2 = false;
});

app.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      isMyExpr: '&'
    },
    template: "<span>{{ isMyExpr() ? 'True' : 'False' }}</span>",
    link: link
  };

  function link($scope) {
    /* nothing for now */
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="plunker">
  <div ng-controller="MainCtrl">
    <div>
      <div>
        <label>
          <input type="checkbox" ng-model="var1">Var1 = {{var1}}</label>
      </div>
      <div>
        <label>
          <input type="checkbox" ng-model="var2">Var2 = {{var2}}</label>
      </div>
    </div>
    <div>
      Inside my directive, isMyExpr() equals:
      <my-directive is-my-expr="!var1 && var2"></my-directive>
    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

以下是相同代码的a working Plunkr。