javascript - 当我从指令更新时，$scope.$watch 不会触发

Question

我有以下代码片段:

HTML:

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

Controller :

    $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 函数永远不会被触发。

有什么想法吗？可能是一个孤立的范围问题？它以前一直有效，直到昨天......当我不得不重做

bower install && npm install

我可以确认:

• dropzone.ondrop 被触发
• event.dataTransfer.files[0] 确实包含正在删除的文件
• 由于 Bower 安装，我还尝试了 Angular 2.1.14、2.1.15 和 2.1.16(当前)，但都不起作用

谢谢!

桑德尔

Answer 1

ngModel 是一个 Controller /提供者，它不是一个范围。无论如何，它与在 Controller 中使用作用域并不相同。您必须使用 ngModel.$setViewValue('some value') 来操作该值。您还必须像这样添加 ngModel:

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

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

另一种选择当然是只传递一个范围变量，如下所示:

指令:

scope: {
    'someAttribute': '='
},

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

Controller View :

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

Controller :

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