All geek questions in one place

Angularjs - can't catch $ watch event

I am trying to implement this directive in my code without any problems. angular-material-fileinput .

I followed the instructions on the github page and added "lfNgMdFileInput" to my dependencies with the module, added the html tag to the HTML and everything worked fine except for one.

As I understand it, it is used to get the data entered in the fields in accordance with the documentation $scope.$watch('lfFilesName',function(old,new){...}).

The data is processed by the directive just fine, and everything is saved without problems in the $ scope directive, but the $ watch event never fires, except when it is initialized.

Please let me know if there is anything I should add. Code itself:

// 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: (code snippet)

<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>

Particles / 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
}
+4
2

Model. , "files02" (.. ).

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

, , , , Angular , . , , , Angular (, jQuery ..)

, , $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;
     });
});
0

Source: https://habr.com/ru/post/1654582/

More articles:


All Articles