1

Angular初心者の質問:

コントローラーとディレクティブがどのように連携するかを示す単純な AngularJS テスト アプリケーションがあります。コントローラーはハードコードされた値aBをいくつか設定aCし、スコープとディレクティブはこれらの値を HTML で表示します。できます。これがJSFiddleです。コードは以下です。実行すると、コンソール出力が期待どおりであることを確認できます。

JS line #63: this.aB =  null
JS line #64: this.aC =  Goodbye
JS line #63: this.aB =  Hello
JS line #63: this.aC =  World

ただし、ハードコーディングされた値をテスト API から取得した値に変更すると、失敗します。コンソール出力は次のとおりです。

JS line #63: this.aB =  null
JS line #64: this.aC =  Goodbye
JS line #63: this.aB =  undefined
JS line #63: this.aC =  undefined

私が行った唯一の変更 (この新しいJSFiddleで確認できます) は、コントローラーのmyFunc関数にありました。ハードコードされた値を次のように置き換えました。

  response = $http.post('http://jsonplaceholder.typicode.com/posts',
    {
      'XXXXX': 'YYYYYYY'
    }
  )    
  self.scopeAB = response.id;
  self.scopeAC = response.id;

経由で API の応答をテストしましたが、curl正常に動作しています。aBでは、ディレクティブが と の値をaCとして報告するのはなぜundefinedでしょうか? この問題を解決するにはどうすればよいですか? これは、HTTP 呼び出しの非同期性に関係していると言えます。しかし、これを正しく機能させる方法がわかりません。

HTML:

<body ng-app="myApp">
  <div ng-controller="MyCtrl as ctrl">
    <div ng-view></div>
    <ul>
      <li>{{1+1}}</li>
      <li><my-directive a-b="null" a-c="'Goodbye'"></my-directive></li>
      <li><my-directive a-b="ctrl.scopeAB" a-c="ctrl.scopeAC"></my-directive></li>
      ab = {{ctrl.scopeAB}}, ac = {{ctrl.scopeAC}}
    </ul>
  </div>
</body>

作業中の Javascript:

myApp = angular.module('myApp',[]);
myApp.directive('myDirective',function(){
    return {
      restrict:'E',
      scope: {
        aB: '=',
        aC: '='
      },
      controller: 'DirectiveCtrl',
      controllerAs: 'dirCtrl',
      bindToController: true,
      template: 'aB={{dirCtrl.aB}} aC={{dirCtrl.aC}} <input ng-model="dirCtrl.aB" />'
    };
  }
);

myApp.controller('DirectiveCtrl', function(){
    var self = this;
    console.log('this.aB = ', self.aB);
    console.log('this.aC = ', self.aC);
})

myApp.controller('MyCtrl', function() {
    var self = this;
    self.myFunc = function() {
      self.scopeAB = 'Hello';
      self.scopeAC = 'World';
    }();
  }
);

更新: Claies は、このJSFiddleを使用することを提案しました。しかし、ディレクティブのコントローラーでaBとの値にアクセスできるようにする必要があるため、それはうまくいきませんaC値に基づいてテンプレートを変更する必要があります。この JS Fiddle は、それらが常に未定義であることを示しているようです。

4

2 に答える 2

2

$http サービスのドキュメントを読む必要があります。呼び出しは非同期で、thenコールバックで成功の応答を処理します

$http.post('http://jsonplaceholder.typicode.com/posts', {'XXXXX': 'YYYYYYY'})
   .then(function(response) {
      self.scopeAB = response.data.id;
      self.scopeAC = response.data.id;
   })
于 2016-01-16T06:28:17.663 に答える