AngularJS 指令检测在模型属性更改中传递

Question

我有一个独立作用域的指令。我想检测作为父范围变量的属性的更改。

到目前为止，我有以下内容:

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


app.controller("ctrl", function($scope, $timeout) {

  $timeout(function() {
    console.log("called");

    $scope.isReady = true;
    $scope.$apply();
  }, 2000);


});

app.directive("car", function($log) {
  return {
    scope: {
      make: "=carMake"
    },
    restrict: 'E',
    template: "<strong ng-bind='make'></strong>",
    link: function(scope, elem, attrs) {

      scope.$watch(attrs.shouldDo, function(value) {
        var val = value || null;
        if (val) {
          $log.info(scope.$eval(attrs.shouldDo));
        }
      }, true);

    }
  }
});

http://fiddle.jshell.net/8Qhuk/

如果我将作用域设置为 false 它会起作用，但是我需要它来处理一个独立的作用域。

Answer 1

只需将 scope 部分写成:

 scope: {
        make : "=carMake",
        shouldDo: '='
    },

修复演示 Fiddle

指令示例:

app.directive("car", function($log) {
    return {
        scope: {
            make: "=carMake",
            shouldDo: '='
        },
        restrict: 'E',
        template: "<strong ng-bind='make'></strong>",
        link: function(scope, elem, attrs) {    

            scope.$watch(function() {
                return scope.shouldDo
            },
            function(newValue, oldValue) {
                var val = newValue || null;
                if (val) {
                    $log.info(scope.shouldDo);
                }
            });    
        }
    }
});

在 watch 中，我们只监听一个变量。你不需要 true 标志

---

顺便说一句，你可以使用绑定(bind)一次只读

 scope: {
        make : "=carMake",
        shouldDo: '@'
    },

当 HTML 时:

<car car-make="make" should-do="{{isReady}}"></car>

演示 2 Fiddle