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

我正在尝试从指令更新存储在控制器（this.isupload）中的数据（我希望将更新绑定到DOM元素上的操作（在本例中，在我的应用程序中，单击通过拖放上传的文件）。根据我所读到的，最好的方法是注入一个服务，该服务将作为应用程序两部分之间的一个具有数据绑定的brdige。我使用的全部代码如下（受此启发，不适用于指令）：

isupload:{{navCtrl.isupload}

对于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();
  }]);

角度模块（'testApp'，[]） .directive（'testView'，['CreateBindingService'，函数（CreateBindingService）{ 返回{ 限制：“EA”， 模板：“”， 链接：函数（范围、元素、属性）{ 元素绑定（'click'，函数（e）{ createBindingService.IncrementIsUpload（）； log（createBindingService.getisupload（））； }); } }; }]) .factory（'CreateBindingService'，函数（）{ var=1； 返回{ getisupload:function（）{ 返回已上载； }, IncrementIsUpload:函数（）{ isc++； 返回已上载； } }; }) .controller（'navController'，['CreateBindingService'，函数（CreateBindingService）{ this.isupload=createBindingService.getisupload（）； }]); 日志的行为与预期一致（每次单击增量都会更改存储在服务中的值），但模型中的值不会更新

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

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

我确实知道有更简单的方法可以做到这一点（在这种情况下，这是显而易见的，甚至我“奇特的”拖放文件上传的东西可能会被一个更简单的方法指令所取代。然而，我仍然认为回答我的问题会帮助我更好地理解Angular是如何工作的

---

但是，如果您提出了一种根本不同的解决问题的方法，我很感兴趣：）

似乎将事件绑定到角度范围之外，这样您就可以使用它的范围。$在您的指令中应用。并将更改上载到复杂类型，请参见下面的演示

角度模块（'testApp'，[]） .directive（'testView'，['CreateBindingService'， 函数（createBindingService）{ 返回{ 限制：“EA”， 模板：“”， 链接：函数（范围、元素、属性）{ 元素绑定（'click'，函数（e）{ 作用域$apply（函数（）{ createBindingService.IncrementIsUpload（）； log（createBindingService.getisupload（））； }); }); } }; } ]) .factory（'CreateBindingService'，函数（）{ 风险值数据={ 已上载:1 }; 返回{ getisupload:function（）{ 返回数据.isupload； }, IncrementIsUpload:函数（）{ data.isupload++； 返回数据； }, 数据：数据 }; }) .controller（'navController'，['CreateBindingService'， 函数（createBindingService）{ this.data=createBindingService.data； } ]);

isupload:{{navCtrl.data.isupload}

将作用域参数输入控制器，在作用域而不是控制器上设置“IsUpload”。

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();
  }]);