Question

我正在尝试将此指令实现到我的代码中而没有多少succces。 angular-material-fileinput

我按照github页面上的说明添加了＆＃34; lfNgMdFileInput＆＃34;对于我的模块依赖项，在HTML中添加了html标记，除了一件事以外，一切都很好。

根据文档记录我在字段中输入数据的方法是使用$scope.$watch('lfFilesName',function(old,new){...})。

指令处理的数据很好，并且在指令$ scope中保存所有内容都没有问题，但$ watch事件永远不会被触发，除非它被初始化。

如果有什么我应该添加，请告诉我。代码本身就是这样的：

// the piece of html
<lf-ng-md-file-input lf-files="files02" lf-api="api02" multiple></lf-ng-md-file-input>

// the piece of js; PS: While the selected files appear on the directive scope, they don't appear in the scope of my controller, 
//  witch i guess is normal but it would still have to catch the watch event, right?
$scope.$watch('files02.length',function(newVal,oldVal){
  console.log($scope.files02);
});

Edit1 :(代码段）

<body  ng-controller="HomeCtrl">
<div ui-view layout="row" ng-style="checkHeightReq()">
    <md-tabs md-selected="selectedIndex"  md-dynamic-height md-stretch-tabs="always" flex="100" md-border-bottom="">
        <md-tab label="{{lang.uploadDocuments}}" ng-disabled="tabsDisabled.tab4">
              <div ng-include="'partials/tabUploadDocuments.html'" ng-controller="UploadDocCtrl"></div>
        </md-tab>
    </md-tabs>
</div>
</body>

Partials / tabUploadDocuments.html：

  <lf-ng-md-file-input lf-files="files01"></lf-ng-md-file-input>
  <lf-ng-md-file-input lf-files="files02"></lf-ng-md-file-input>

UploadDocCtrl：

angular.module('demo').controller('UploadDocCtrl', UploadDocuments);


UploadDocuments.$inject = ['$scope','LangVars','$mdMedia', '$mdToast'];

function UploadDocuments($scope, LangVars,$mdMedia, $mdToast) {
//unrelated stuff
 $scope.$watch('files02',function(newVal,oldVal){
                     console.log($scope.files02);
                 },true);   
 $scope.$watch('files01',function(newVal,oldVal){
                      console.log($scope.files02);
                  });

//unrelated stuff
}

Answer 1

Watch将在Model属性上运行。您可以将代码更改为仅使用“files02”（即无长度）。

$scope.$watch('files02',function(newVal,oldVal){
                 console.log($scope.files02);
     });

Answer 2

我不确定这是否能解决您的问题，但仍然如此看起来Angular没有捕获范围的变化，但是该对象在您的代码中发生了变化。一个可能的原因可能是你应用watch的对象，可能正在改变Angular的范围（例如.. jquery modal等）

如果那就是问题，那么尝试使用$ apply

这是片段

//place this just after the line when you are changing $scope.file02
$scope.$apply(function() {
   $scope.file02;
});

然后angular会在$ watch block中捕获它

希望有所帮助

更新：

$timeout(function(){
     $scope.$apply(function() {
       $scope.file02;
     });
});

Angularjs - 无法捕捉$ watch事件

2 个答案: