Question

我的指令问题变得很难解决，这似乎是由版本1.0.8和版本1.2.0之间的角度变化引起的。

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

然而在使用版本1.2.0的second fiddle中，相同的代码只是没有更新指令

它看起来与具有隔离范围的指令有关，但却无法拥有它自己的范围变量。例如，指令的控制器：

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

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

Answer 1

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

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

我确信使用template: 'html here'也可以，但现实中还有更多的HTML。

Working fiddle

Answer 2

孤立范围发生了变化。表达式$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: '='
    },

Angularjs指令私有范围/模型

2 个答案: