Angularjs 指令私有范围/模型



我遇到了一个指令的问题,这个问题正在变得难以解决,这似乎是由于 1.0.8 版和 1.2.0 版之间的角度变化造成的。

在使用版本 1.0.8 的第一个 jsfiddle 中,您可以看到在更改输入文件时调用 fileChanged fn 并更改$scope.file

然而,在使用版本1.2.0的第二个小提琴中,相同的代码只是没有更新指令

看起来它与具有隔离作用域的 a 指令有关,但不能拥有自己的作用域变量。例如,指令的控制器:

controller: function ($scope, $timeout, $upload) {
     $scope.fileCount = 0;
}

我在这里错过了一些非常关键的东西吗?

这不起作用的原因是没有为指令设置模板:

...
scope: {
        uploadPath: '@'
},
templateUrl: 'file-uploader.html',
controller: function ($scope, $timeout, $upload)
...

我相信使用template: 'html here'也可以工作,但现实是有更多的 html。

工作小提琴

在隔离作用域方面发生了变化。表达式$scope.file = element.files[0];更改指令作用域中的file,而不是指令范围之外的作用域。您需要做的是在指令中的file和指令外的file之间建立连接。

<div file-upload file="file">
  <input type="file" />
  <hr />
  File selected: {{file.name}}
</div>
...
myApp.directive('fileUpload', function(){
  return {
    restrict: 'A',
    scope: {
        file: '='
    },

最新更新