AngularJS 指令 ng-include 中的 1.5 范围

Question

下面是一些带有 uploadfile 指令的代码 http://jsfiddle.net/miuosh/n6yppypj/。问题是我用这个

  <input type="file" file-model="myFile" />
  <button ng-click="uploadFile()">upload me</button>

在 ng-include="'views/uploadFileForm.html'" 中。

在指令中，我将 "myFile" 添加到范围。事实证明 Angular 使用 myFile 创建新范围。要将 "myFile" 添加到 "rootScope" 我需要使用

modelSetter(scope.$parent.$parent.$parent[..],element[0].files[0])

这很不方便，因为我需要知道我有多少个父作用域。

Answer 1

我在使用 angular 处理文件输入时遇到了类似的问题。您可以创建一个指令来监听文件更改并使用文件调用其控制器函数。在这里jsFiddle。

var app = angular.module('app', []);

app.controller('yourCtrl', function() {
    $scope.image;
    $scope.imageChanged= function (files) {
        $scope.image = files;
    };
});

app.directive('customOnChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeFunc = scope.$eval(attrs.customOnChange);
      element.bind('change', function(event){
        var files = event.target.files;
        onChangeFunc(files);
      });

      element.bind('click', function(){
        element.val('');
      });
    }
  };
})

<input type="file" id="imgInput" custom-on-change="imageChanged"/>

AngularJS 指令 ng-include 中的 1.5 范围

AngularJS 1.5 scope in directive ng-include

angularjs

angularjs-directive

angularjs-ng-include