1

親コントローラーを持つ親ビューがあり、2 つの子コンポーネントがあり、それぞれに独自のコントローラーがあります。

このようなもの

<section>     // Main Controller
  <table-users listusers="users"></table-users>     // Component Table User Controller
  <table-news listusers="users"></table-news>       // Component Table News Controller
</section>

メインコントローラーは API への GET XHR リクエストを実行し (約 1 ～ 2 秒かかります)、そのリクエストの応答がコンポーネントに渡されます。

(function() {
  'use strict';

  angular
    .module('app.view')
    .component('tableUsers', {
      bindings: {
        listusers: '='
      },
      controller   : 'UsersTableController',
      controllerAs : 'vm',
      templateUrl  : 'whatever.html'

    });

})();

私の問題は、コンポーネントがすでに印刷された後に応答が返されることです...

だから私は vm.listusers = undefined を得ました:S そして私は vm.listusers = [{},{}...] オブジェクトを持っています...

MainController で偽の vm.users を作成すると、すべてが機能するため、問題は GET が応答を返すのが遅すぎることです。

GitHub API PLUNKR CASE LINKを使用して、このサンプル ケースを作成しました。

コンポーネントに伝える方法はありますか - この値が DOM などに出力される前に返されるまで待ってください。ここで少し欠けています。

ありがとうございます

4

1 に答える 1

1

Angular 1.5.3 以降、いくつかの便利なメソッドにアクセスできるようになりました。これらの 1 つは $postLink と呼ばれ、基本的にコンポーネント内のリンカー関数を模倣できる方法であり、本質的にコンポーネントのみを作成する方法です。

    vm.$postLink = function() {
      $timeout(function() {
        vm.users = vm.listusers;
      })
    }

$timeout がないと正しく動作しないという問題が 1 つあります。とにかく、ダイジェストサイクルを起動すると言います。

それについて読むためのいくつかの場所ここ、ここそして私もそれについて書いたここ

すでに「コントローラーにバインドされている」値をバインドする理由をすべて述べたので、既に存在するバインディングを使用するだけです...

 angular
.module('app')
.component('tableUsers', {
  bindings: {
    listusers: '='
  },
  controller   : 'ComponentController',
  controllerAs : 'vm',
  template  : '<h1>{{vm.title}}</h1>'+
              '<p>{{vm.listusers}}</p>' +
              '<ul>' +
                '<li ng-repeat="user in vm.listusers">' +
                  '<strong>{{user.login}}</strong><span> - {{user.id}} </span>' +
                '</li>' +
              '</ul>'
});

vm.users = vm.listusers を作成する必要はありません... 既にコントローラーにバインドされているので、そのまま使用してください...

コンポーネントのソース コード内で、おなじみの from ディレクティブの bindToController 行が、渡すバインディング配列にデフォルト設定されていることがわかります。

bindToController: options.bindings || {},

コンポーネントとは、ディレクティブが私たちに強制したくだらないボイラープレートを取り除くことです。

また、すぐに使える controllerAs 命名も利用できます。テンプレートで vm という無意味な名前を付ける必要はありません $ctrl は、すぐに使用できる「無料の」バインディングです - 私はその使用を強く推奨します。

 angular
.module('app')
.component('tableUsers', {
  bindings: {
    listusers: '<' // Use 1 way bindings to enforce uni-directional data flow
  },
  controller   : 'ComponentController',
  template  : '<h1>{{$ctrl.title}}</h1>'+
              '<p>{{$ctrl.listusers}}</p>' +
              '<ul>' +
                '<li ng-repeat="user in $ctrl.listusers">' +
                  '<strong>{{user.login}}</strong><span> - {{user.id}} </span>' +
                '</li>' +
              '</ul>'
});

最後にあなたのPLUNKR

于 2016-06-27T09:56:41.223 に答える