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

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

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

最佳答案

由于您正在监听DOM click事件：

element.on('click', 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循环，并对双向绑定进行脏检查。

关于javascript - 在自定义指令的 Controller 中更新$ scope时，Angular.js双向绑定(bind)不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25761509/