$ 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.15和2.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]