2016-09-19 7 views
0

私はAngularJSでカスタムディレクティブを構築する方法を学びたいと考えています。現在私はAngularJS 1.5.8を使用しています。"コントローラとして"隔離されていないディレクティブの分離スコープを持つ

コントローラーのスコープがではないが表示されている分離スコープのディレクティブの例を作成しようとしています。そのため、スコープを{}に追加して選択的に公開できます。この例では、は、を取得するには、 'Name:Street:'と表示されます。これは、ctrl.customerをディレクティブで使用できないようにするためです。それから、後で "scope:{}"に "customer: '='"を追加して、 "Name:David Street:123 anywhere street"を取得します。残念ながら、私は "名前:デイヴィッド・ストリート:123通りどこでも通り"と書かれています。私が試してみました

もの:

  • 設定 "bindToController:真の"
  • 取り外し "スコープを:{}" と "bindToController:{}" の設定(私は追加し、 "顧客を: '='"
  • "bindToController:false"を設定してください(同様に正しいかもしれません)
  • htmlを読み込んだ後にshift-F5キーを繰り返し押しても、古いファイルがキャッシュされていないことを確認してください。

testScope.js:

var app = angular.module('scopeModule',[]); 

app.controller('Controller',[function(){ 
    var vm = this; 
    vm.customer = { 
     name: 'David', 
     street: '123 anywhere street' 
    }; 
}]); 

app.directive('sharedScope', function() { 
      return{ 
       scope:{}, 
       template: 'Name:{{ctrl.customer.name}} Street:{{ctrl.customer.street}}', 
       controller: 'Controller', 
       controllerAs: 'ctrl', 
       bindToController: true 
      }; 
}); 

index2.html:

+0

あなたは間違います。独立スコープのポイントは、ディレクティブスコープが外側スコープから分離されていることを確認することです。このディレクティブを使用してビューの範囲を指定します。ディレクティブに独自のcontrollerAsがあり、コントローラがデータを公開している場合、もちろんこのディレクティブはこのデータにアクセスできます。 –

+0

あるいは、この指令では少し違っていると言えます。コントローラーはそのスコープなので、何でも入れてもすぐにアクセスできます – maurycy

答えて

1
<!doctype html> 
<html ng-app="scopeModule"> 
    <body> 
     <shared-scope></shared-scope> 

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
     <script src="testScope.js"></script> 
    </body> 
</html> 

ControllersharedScope指令のコントローラです。これは単一のエンティティです。コントローラとテンプレートの両方が指令に属しているため、指令のコントローラのthisは指令のテンプレートのctrlです。

ディレクティブのスコープを自分自身から切り離す理由はありません。

隔離されたスコープは、他のディレクティブのスコープから隔離されています。 From the reference

{...}(オブジェクトのハッシュ):新しいスコープが 指令の要素のために作成される "単離"。 「隔離」スコープは の通常のスコープと異なり、プロトタイプ的に親スコープから継承しません。 再利用可能なコンポーネントを作成するときに便利です。 は、誤って親スコープのデータを読み取ったり変更したりしてはいけません。

これはsharedScopeディレクティブは何のコントローラと親ディレクティブはControllerコントローラを持っていない場合、この

<div ng-controller="Controller as ctrl"> 
    <shared-scope></shared-scope> 
    </div> 

名前になりますことを意味:ストリート:

出力。

+0

OK。それは私が使いたいもののように見えます。私はチュートリアルに従うと、すべてのコードを現代の構文に変換しようとしていたので、 'Controller as'の代わりに$ scopeを使用するチュートリアルに従っています。 –

+0

それを使用すると、コントローラにアクセスするためにディレクティブをどのように変更できますか? 私は 'スコープ:{customer:' = '}'を試しましたが、何も得られませんでした。 'scope:{ctrl.customer:' = '}私にエラーを出しました。 –

+0

バインディングが 'scope:{customer: '='}'として提供されている場合、バインドされたスコーププロパティは、親スコープから分離されたものへの属性として '

'のように渡されることが期待されます。 'sharedScope'はこの設定の' Controller'とは別のコントローラー(例えば空の関数)を持たなければなりません。 – estus

関連する問題