angularjsコンポーネントは、親コントローラにデータがロードされたことをどのように検出できますか？

私はメインコントローラを持っているが、いくつかののDataServiceからロードされたプロパティvm.dataを持ってVMを、エイリアス。angularjsコンポーネントは、親コントローラにデータがロードされたことをどのように検出できますか？

コントローラのビューには、カスタムコンポーネントrs-dropdownがあり、vm.dataがロードされるとドロップダウン値がロードされるはずです。 vm.dataはメインコントローラのプロパティです。

コンポーネント自体が親MainControllerの変更を監視する方法はありますか？データがロードされたら、ロードアクションを実行しますか？

おかげ

UPDATE：おかげClavies、追加NG-場合、コンポーネントへ=「条件」は、実際の条件が真で一度作成され、初期化するには、このコンポーネントになります。角度のように見えますが、常にng-ifを監視し、条件が満たされたときにコンポーネントをオンにします。

は、ここで私は私のコンポーネントに ng-if="vm.woReAssign"属性を追加し、現在のコンポーネントが初期化され、この条件が真である場合にのみ作成することで。

<rs-dropdown ng-if="vm.woReAssign" 
       rs-server-controller="WorkOrder" 
       rs-server-action="GetServiceProviderDropDownList" 
       rs-filter="{woNum:'{{vm.woReAssign.WorkOrderNumber}}'}" 
       rs-class="form-control"> 
</rs-dropdown>

P.S.可能性のある遅延を伴う非同期呼び出しによって条件が真になっても、Angularは常にこの条件をチェックしてから、コンポーネントを復活させるようです。

出典

2016-11-18 monstro

40661644/call-angularjs-1-5-components-method-from-the-controller）？あなたがここで実際に達成しようとしていることを理解するための*情報（およびコード）をもっと見たいと思っているとの複数のコメントがあったとき、あなたが以前の質問よりも少ない情報を提供していること以外は？私は要素の行動が親の行動に結びついている場合、それはコンポーネントであるための良い候補ではありません、おそらく代わりに指示する必要があり、昨日の質問に説明しようとしたとして – Claies

。 – Claies

これより簡単なことは何ですか？コントローラは、コントローラのプロパティが変更されたかどうかを監視できます。なぜコードを見たいのですか？ – monstro

私はあなたが言及したシナリオを作成しようとしました。コンポーネント更新中のライフサイクルlifecycle hook $ onchangeでコントローラアップデートを聴くことができます。

は、ドロップダウンコンポーネントがデータを親コントローラに移入されたときにボタンclick.Hopeに満たされ、このことができますexample参照してください！これはあなたが尋ねた質問[昨日]（http://stackoverflow.com/questions/から何が違うのですか

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

app.controller("mainController", function(bookService, $scope) { 
    var vm = this; 
    vm.showDropdown = false; 
    vm.loadBooks = function() { 
    bookService.getAllBooks().then(function(books) { 
     vm.books = books; 
     vm.showDropdown = true; 
    }, function(err) { 
     vm.showDropdown = false; 
     //error 
    }); 
    } 
}); 

function dropdownControllerFn(bookService) { 
    var model = this; 
    model.$onInit = function() { 
    //do intialization 
    } 

    model.$onChanges = function(changes) { 
    model.books = changes; 
    }; 
} 

app.component("rsDropdown", { 
    templateUrl: 'dropdownComponent.html', 
    bindings: { 
    books: '<' 
    }, 
    controllerAs: 'model', 
    controller: dropdownControllerFn 
}); 

app.factory('bookService', ['$http', '$timeout', '$q', function($http, $timeout, $q) { 
    var urlBase = 'favouriteBooks.json'; 
    var service = {}; 
    service.getAllBooks = function() { 
    return $http.get(urlBase).then(function(response) { 
     return response.data; 
    }); 
    }; 
    return service; 
}]);; 
}]);

dropdownComponent.html

<div> 
    <select ng-options="s.bookName for s in model.books" ng-model="selitem"> 
     <option value="">--Select--</option> 
    </select> 
</div>

index.htmlを

<body data-ng-app="myApp" data-ng-controller="mainController as vm"> 
    <rs-dropdown books=vm.books ng-if="vm.showDropdown"></rs-dropdown> 
    <button ng-click="vm.loadBooks()">Get Books</button> 
</body>

出典

2016-11-18 18:50:30

angularjsコンポーネントは、親コントローラにデータがロードされたことをどのように検出できますか？

答えて

関連する問題