Javascript $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;
            };
        }
    };
});

指令：

    <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函数从未触发

有什么想法吗？？可能是一个孤立的范围问题？它过去一直工作到昨天。。。当我不得不重做的时候

bower安装和npm安装

我可以证实：

• dropzone.ondrop已启动
• event.dataTransfer.files[0]不包含要删除的文件
• 由于安装了bower，我也尝试了angular2.1.14、2.1.15和2.1.16（当前版本），但都不起作用

谢谢

---

Sander

您似乎没有修改scope.ngModel的值。相反，您将覆盖变量scope.ngModel，使其指向不同的对象，即：event.dataTransfer.files[0]

ngModel是控制器/提供者，而不是作用域。无论以何种方式，它都不同于在控制器中使用类似作用域的方法。您必须使用ngModel.$setViewValue（“某些值”）来操作该值。您还必须添加如下所示的ngModel：

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

我找到了一个很好的教程，它完美地描述了这一点：

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

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

指令：

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>

---

谢谢尝试了这一点，但仍然不起作用：-（盯着它看了一段时间，问题是…HTML标记中还有一个“data ng if”…将其更改为“data ng show”解决了它…奇怪…这意味着从DOM中删除的指令是如果不满足条件，则没有“访问权”再到作用域？？谢谢！尝试了这个，但仍然不起作用：-（盯着它看了一段时间，问题是…HTML标记中还有一个“data ng if”…将其更改为“data ng show”解决了它…奇怪…这意味着从DOM中删除的指令是如果不满足条件，则不再“访问”作用域？？