Question

我有以下代码段：

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函数。

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

bower install＆amp;＆amp; npm install

我可以确认：

dropzone.ondrop被解雇
event.dataTransfer.files [0]确实包含要删除的文件
由于安装了凉亭，我还尝试了角度 2.1.14 ， 2.1.15 和 2.1.16 （当前），但没有一个是工作

谢谢！

桑德

Answer 1

ngModel是一个控制器/提供者，它不是一个范围。它与以任何方式使用控制器中的示波器并不完全相同。你必须使用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];
        });
    }
}

控制器视图：

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

控制器：

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

Answer 2

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

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

2 个答案: