$watch 复杂的表达式

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() 函数，该函数将评估标记中指定的表达式的结果。

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 */
  }
});

<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>

这是相同代码的a working Plunkr。

$watch 复杂的表达式

$watch on complex expression

angularjs

angularjs-directive

angularjs-scope