2

のディレクティブを作成しようとしていますmd-autocomplete。AngularJSが提供する回答を使用してみました- ng-model を使用するディレクティブを作成しますが、うまくいきません。

私の CodePen はここにあります: http://codepen.io/colbroth/pen/QyMaQX/?editors=101。

このコードは、 https: //material.angularjs.org/latest/demo/autocomplete にあるオートコンプリートの Angular マテリアル デモに基づいています。複数のページがあり、州を選択するためのオートコンプリート フィールドが必要です。Web ページ コンポーネントごとにコードを繰り返したくありません。

state-directiveどちらの場合も同じ値を反映する状態がmd-autocomplete必要です。demoCtrl.selectedしかし、入力要素を更新すると、state-directiveこれが反映されず、その逆も同様です。

<input ng-model="demoCtrl.selectedState">

<state-directive ng-model="demoCtrl.selectedState">...</state-directive>

4

1 に答える 1

1

あなたは正しい軌道に乗っています。あなたの問題は、モデルが文字列であることです-javascriptのプリミティブngModelですが、この種の問題を回避したい場合は、常にオブジェクトである必要があります。

スコープの継承は通常簡単で、多くの場合、それが起こっていることを知る必要さえありません... プリミティブ (数値、文字列、 boolean) 子スコープ内から親スコープで定義されます。ほとんどの人が期待するようには機能しません。子スコープは、同じ名前の親プロパティを非表示/シャドウにする独自のプロパティを取得します。これは AngularJS が行っていることではありません。これが JavaScript プロトタイプの継承のしくみです。新しい AngularJS 開発者は、多くの場合、ng-repeat、ng-switch、ng-view、および ng-include がすべて新しい子スコープを作成することを認識していないため、これらのディレクティブが関係している場合に問題が発生することがよくあります。(問題の簡単な説明については、この例を参照してください。)

プリミティブに関するこの問題は、常に「.」を使用するという「ベスト プラクティス」に従うことで簡単に回避できます。あなたのngモデルで。

Understanding-Scopesから取得このYoutube ビデオ にもリンクしています- 十分に投資された 3 分間の時間

  function DemoCtrl() {
    var self = this;
    self.state = {
      selected: "Maine"
    };
  }

固定コードペン

于 2016-01-16T12:23:32.330 に答える