$ scope。当我从指令更新时,$ watch不会触发

我有以下代码片段:

HTML:

<div data-filedrop data-ng-model="file"></div> 

控制器:

  $scope.$watch('file', function(newVal) { if (newVal) { alert("File",newVal); }, false); } 

指示:

 angular.module('app').directive('filedrop', function () { return { restrict: 'A', templateUrl: './directives/filedrop.html', replace: true, scope: { ngModel: '=ngModel' }, link: function (scope, element) { var dropzone = element[0]; dropzone.ondragover = function () { this.className = 'hover'; return false; }; dropzone.ondragend = function () { this.className = ''; return false; }; dropzone.ondrop = function (event) { event.preventDefault(); this.className = ''; scope.$apply(function () { scope.ngModel = event.dataTransfer.files[0]; }); return false; }; } }; }); 

当我更新$ scope时,$ watch函数从不触发。

有任何想法吗?? 可能是一个孤立的范围问题? 它曾经工作到昨天…当我不得不重做

凉亭安装&npm安装

我可以确认:

  • dropzone.ondrop被解雇
  • event.dataTransfer.files [0]确实包含被删除的文件
  • 由于凉亭安装我也试过angular2.1.14,2.1.152.1.16 (当前),但没有工作

谢谢!

桑德

ngModel是一个控制器/提供者,它不是一个范围。 以任何方式使用控制器中的范围都是不一样的。 你必须使用ngModel。$ setViewValue('some value')来操作这个值。 你也必须像这样添加ngModel:

 require: 'ngModel', link: function (scope, element, attrs, ngModel) { // do some stuff ngModel.$setViewValue(element.html()); // example } 

我find了一个很好的教程,它完美地描述了这个: http : //suhairhassan.com/2013/05/01/getting-started-with-angularjs-directive.html#.U1jme-aSzQ4

另一个选项当然是只传递一个范围variables,如下所示:

指示:

 scope: { 'someAttribute': '=' }, link: function(scope, element) { dropzone.ondrop = function(event) { scope.$apply(function() { scope.someAttribute = event.dataTransfer.files[0]; }); } } 

控制器视图:

 <div filedrop some-attribute="mymodel"></div> 

控制器:

 $scope.$watch('mymodel', function(newVal) { // yeah }); 

看来你并没有修改scope.ngModel的值。 而是覆盖variablesscope.ngModel,使其指向不同的对象,即:event.dataTransfer.files [0]