Angularjs - $ watchイベントをキャッチすることができません

私はこの命令を自分のコードに実装することを大いに尽くしています。 angular-material-fileinput。

私はgithubページの指示に従い、 "lfNgMdFileInput"をモジュールの依存関係に追加し、HTMLタグをHTMLに追加しました。

ドキュメントに従ってフィールドに入力されたデータをキャッチする方法は、$scope.$watch('lfFilesName',function(old,new){...})を使用しています。

ディレクティブ$ scopeで問題なくデータがすべて処理されますが、$ watchイベントは初期化されたときを除きトリガーされません。

追加する必要があるものがあれば教えてください。コードitsselfはこれです：

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

パーシャル/ 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 
}

出典

2016-09-14 IvanSt

あなたは、「選択したファイルは、ディレクティブのスコープに表示されますが、彼らは私のコントローラの範囲には表示されません」とはどういう意味ですか？別の指令で 'lf-ng-md-file-input'を使用していますか？ '$ watch'はデフォルトで' $ scope'のプロパティを監視します。それが別の指示にある場合は、それを渡す必要があります。もう少し文脈が役立つだろう。 – fodma1

いいえ、私は別の指令でlf-ng-md-file-inputを使用していません。私は、タグを含む単純なhtmlファイルを持っています、それは角度の材料タグ（）の中にインポートされ、特定のタブは、$ウォッチイベントをキャッチしようとするところに独自のコントローラを持っています。それが役に立つと思うなら、私のコードがどのように構造化されているかのスニペットを投稿できます。 – IvanSt

私はコードが役立つかもしれない場合、どのように構造化されているかについてのいくつかのコードスニペットで投稿を編集しました。 – IvanSt

ウォッチしますModelプロパティで作業する。 'files02'のみを使用するようにコードを変更することができます（長さなし）。

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

出典

2016-09-14 13:28:12

お返事ありがとうございます。 Unfortanelyそれはdoesnt仕事。私も長さなしで試してみました。彼らが提供したデモも.lengthで動作します。 – IvanSt

コントロールの初期化中にfiles02プロパティを定義しましたか？ –

初期化中にfiles02プロパティを自分のコントローラのスコープに定義したのですか？はいの場合、私はhadnt、私はそれを試みただけで、それは助けているようです。 – IvanSt

私はこれがあなたの問題を解決するかどうかわからないが、角度がしかし、そのオブジェクトがあなたのコードに変更された範囲の変更をキャッチされていないように、まだ、が見えます。問題のthatsその後、$ここ

を適用するのを使ってみてのであれば

（ETC、例えば... jqueryのモーダルのための）角度の範囲外に変化するかもしれない、あなたは時計を適用し、そのオブジェクトことができ一つの可能な理由スニペット

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

その後、角度が

はそれが

を役に立てば幸い$時計ブロックでそれをキャッチします

UPDATE：

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

出典

2016-09-14 13:58:00

アプリケーションは、それを不幸にしているときに "Error：[$ rootScope：inprog] $ digest already in progress"というエラーメッセージが表示されてクラッシュします。 – IvanSt

あなたのfile02オブジェクトがどのように変化していくのですか？ –

githubからインポートされたディレクティブを通して。 – IvanSt

Angularjs - $ watchイベントをキャッチすることができません

答えて

関連する問題