Question

我正在尝试从指令更新存储在控制器中的数据（this.isUploaded）（我想将更新绑定到DOM元素上的操作（在此示例中，单击，在我的应用程序中，通过拖放文件上传））。根据我的阅读，最好的方法是注入一个服务，它将作为应用程序的两个部分与数据绑定之间的桥梁。我使用的整个代码如下（灵感来自这个post，它不适用于指令）：

<body>
  <div ng-controller="navController as navCtrl">
    <p>isUploaded: {{navCtrl.isUploaded}}</p>
    <div test-view></div>
  </div>
</body>

对于JavaScript：

angular.module('testApp', [])
  .directive('testView', ['CreateBindingService', function(createBindingService) {
    return {
      restrict: 'EA',
      template: '<a href="#">Incrementation</a>',
      link: function(scope, element, attrs) {
        element.bind('click', function(e) {
          createBindingService.incrementIsUploaded();
          console.log(createBindingService.getIsUploaded());
        });
      }
    };
  }])
  .factory('CreateBindingService', function() {
    var isUploaded = 1;
    return {
      getIsUploaded: function() {
        return isUploaded;
      },
      incrementIsUploaded: function() {
        isUploaded++;
        return isUploaded;
      }
    };
  })
  .controller('navController', ['CreateBindingService', function(createBindingService) {
    this.isUploaded = createBindingService.getIsUploaded();
  }]);

日志的行为符合预期（每次点击增量都会更改存储在服务中的值），但模型中的值不会更新。

我试着看看$ watch，但到目前为止，没有真正发生过，所以它似乎更像是一个绑定问题而不是更新问题。

可能是因为我使用this.isUploaded而不是$ scope.isUploaded吗？事实上，我所看到的大多数帖子都使用了后者，而我使用的是前者（我在Code School学习了Angular的基础，他们不使用$ scope）。

我知道有更简单的方法可以做到这一点（在这种情况下，它很棒，甚至我的＆＃34;幻想＆＃34;拖放文件上传的东西可能会被一种方式取代更简单的指令。但是，我仍然认为得到我的问题的答案将有助于我更好地理解Angular的工作原理。

但是，如果你建议采用一种根本不同的方法来解决这个问题，我很感兴趣：）

Answer 1

似乎绑定事件是我们在Angular范围之外的，所以你可以使用它。$ apply在你的指令中。并且更改isUploaded到复杂类型请参阅下面的演示。

＆＃13;

angular.module('testApp', [])
  .directive('testView', ['CreateBindingService',
    function(createBindingService) {
      return {
        restrict: 'EA',
        template: '<a href="#">Incrementation</a>',
        link: function(scope, element, attrs) {
          element.bind('click', function(e) {
            scope.$apply(function() {
              createBindingService.incrementIsUploaded();
              console.log(createBindingService.getIsUploaded());
            });
          });
        }
      };
    }
  ])
  .factory('CreateBindingService', function() {
    var data = {
      isUploaded: 1
    };
    return {
      getIsUploaded: function() {
        return data.isUploaded;
      },
      incrementIsUploaded: function() {
        data.isUploaded++;
        return data;
      },
      data: data
    };
  })
  .controller('navController', ['CreateBindingService',
    function(createBindingService) {
      this.data = createBindingService.data;
    }
  ]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="testApp">
  <div ng-controller="navController as navCtrl">
    <p>isUploaded: {{navCtrl.data.isUploaded}}</p>
    <div test-view></div>
  </div>
</body>

＆＃13;

AngularJS - 通过服务从指令更新控制器数据（this.model语法）

1 个答案: