javascript - 更新自定义指令 Controller 中的 $scope 时，Angular.js 双向绑定(bind)不起作用？

Question

我在编写一组可以相互联系的指令时遇到了这个问题。

这是 CodePen 网址:http://codepen.io/jennieji/pen/mDGuw

JS代码如下:

angular.module('app', [])
.directive('testDirective', function() {
  return {
    controller: function($scope){
      $scope.now = 0;

      this.update = function() {
        $scope.now++;
      };
    },
    link: function(scope) {
      scope.$watch(function(){
        return scope.now;
      }, function(newVal, oldVal) {
        element.append('<p>[LOG] $watch now:' + newVal + '</p>');
      }, true);
      scope.$watch('now', function(newVal, oldVal) {
        element.append('<p>[LOG] $watch now:' + newVal + '</p>');
      });
    }
  };
})
.directive('testUpdate', function() {
  return {
    require: '^testDirective',
    link: function(scope, element, attr, ctrl) {
      element.on('click', function(){
        ctrl.update();
        element.after('<p>[LOG] click now:' + scope.now + '</p>');
      });
    }
  }
});

这是 HTML:

<div ng-app="app">
  <div test-directive>
    <p>{{ now }}</p>
    <button test-update>Update now</button>
  </div>
<div>

Answer 1

由于您正在监听 DOM 点击事件:

element.on('点击', function(){

除非您$apply，您的范围更改才会生效:

link: function(scope, element, attr, ctrl) {
      element.on('click', function(){

        scope.$apply(function() {
          ctrl.update();
        });
        ctrl.update();
        element.after('<p>[LOG] click now:' + scope.now + '</p>');

      });
    }

$apply 启动 Angular $digest 循环并对双向绑定(bind)进行脏检查。