更新 https://plnkr.co/edit/kbz5uimNZ6vKTiT9QB6a?p=preview已创建用于测试。
我有以下指令egFiles
来处理文件上传的<input type="file" id="newFile" eg-files="model.files" has-file="model.hasFile" />
状态。
(function () {
'use strict';
angular.module('myApp').directive('egFiles', egFiles);
function egFiles() {
var directive = {
link: link,
restrict: 'A',
scope: {
files: '=egFiles',
hasFiles: '='
}
};
return directive;
function link(scope, element, attrs) {
element.bind('change', function () {
scope.$apply(function () {
if (element[0].files) {
scope.files.length = 0; // Breakpoint not hit here
angular.forEach(element[0].files, function (f) {
scope.files.push(f);
});
scope.hasFiles = true;
}
});
});
if (element[0].form) {
angular.element(element[0].form)
.bind('reset', function () {
scope.$apply(function () {
scope.files.length = 0;
scope.hasFiles = false;
});
});
}
}
}
})();
以下Anguar 1.5组件使用该指令。
(function (undefined) {
'use strict';
angular.module('myApp')
.component('doc', {
template: '...
<input type="file" id="newFile" eg-files="model.files" has-file="model.hasFile" />
....',
bindings: {
id: '<',
"$router": '<'
},
controllerAs: 'model',
controller: [controller]
});
function controller() {
var model = this;
model.$routerOnActivate = function (next, previous) {
model.id = next.params.id;
}
model.hasFile = false;
model.uploading = false;
}
})();
我在指令egFiles中绑定到change
的函数中设置断点。但是,当我通过单击按钮选择文件时,永远不会触发断点?