1

私はAngularJsディレクティブに比較的慣れていないので、スコープがどのように機能するかを理解しようとしています. よくわかると思いますが、次のような問題に遭遇します。私の指示:

<ng-view>
    <div my-directive ng-click="foo()" >...</div>
</ng-view>

指令コード:

app.directive('myDirective',function(){
    return function(scope,element,attrs){
        scope.foo = function(){...}
    }
})

要素をクリックすると発火することを期待していfoo()ましたが、そうではありません。batarangでスコープを確認すると、rootScopeを親としてスコープが存在する（id：#003）ことがわかりますが、要素またはその子をクリックすると、スコープはルート（id：#002）にangular.element($('div[my-directive]')).scope()なります。バトランの問題ですが、結果は同じでした。

更新:問題の原因を見つけたと思います。実際のアプリでは、ディレクティブを使用する要素がディレクティブ内にあります。ngViewディレクティブを ngView の外に置くと、リンク関数で定義したプロパティがスコープに表示されるようになりました( rootScope)。非同期ロードが原因だと思いますが、確認する必要があります。このフィッフルでは、静的テンプレートで ngView を使用しましたが、機能しませんでした (機能し、問題を再現できませんでした)。

4

2 に答える 2

1

scope: trueディレクティブは、新しいスコープ ( ) や分離スコープ ( )を指定していないか、scope: { ... }transclusion を使用していないため、HTML で「有効なスコープ」を使用します。

ディレクティブがコントローラーの外部で使用される場合、$rootScope が使用fooされ、その上で定義されます。

<div my-directive ng-click="foo()" >click me</div>
<div ng-controller="MainCtrl"></div>

ここに画像の説明を入力
fiddle

ディレクティブがコントローラー内で使用されている場合、そのコントローラーのスコープが使用されます。

<div ng-controller="MainCtrl">
   <div my-directive ng-click="foo()" >click me</div>
</div>

ここに画像の説明を入力
fiddle

于 2013-06-21T18:07:54.247 に答える
1

これを実現する 1 つの方法は、ディレクティブでテンプレートとトランスクルージョンを使用することです。

app.directive('myDirective', function () {
   return {
      template: '<div ng-click="foo()" ng-transclude></div>',
      transclude: true,
      controller: function ($scope, $element, $attrs) {
         $scope.foo = function () {...};
      }
   };
});

そしてあなたのhtml：

<div my-directive>...<div>

これが機能する理由は、ディレクティブ内fooのスコープで関数を定義するためです。最初の試みでは、親スコープにあると予想されます。ディレクティブで親スコープの定義を変更することはできますが、これは望ましくありません。基本的に、ディレクティブのユーザーに、ディレクティブの内部定義機能について知ってもらうように求めています。少しぎこちない/後ろ向きです。foofoofoo

于 2013-06-21T17:26:33.503 に答える