17

$scope次の 2 つのディレクティブ間で共有したい:

One23SRCApp.directive('directive1',function() {
    return {
        restrict: "A",
        scope:true,
        link: function (scope, element, attrs) {
           scope.tablename = "table";
        }
    };
});


One23SRCApp.directive('directive2',function() {
    return {
        restrict: "A",
           link: function (scope, element, attrs) {
           var tablename = scope.tablename;
        }
    };
})

HTMLには、次のものがあります。

<input type="text" directive2 placeholder="Search Models..."> 

<table directive1>
  <tr>
     <td>column1</td>
     <td>column1</td>
   </tr>
</table>

「directive1」という名前のディレクティブを分離スコープで作成し、「table」という名前をscope.tablenameプロパティに割り当てました。他のディレクティブでこのスコープ プロパティにアクセスできません。

では、あるディレクティブのスコープに別のディレクティブでアクセスするにはどうすればよいでしょうか?

4

4 に答える 4

16

私の提案は、サービスなどの共有リソースを使用することです。サービスはシングルトンです。つまり、各サービスのインスタンスは常に 1 つしかないため、それらを使用して、ディレクティブ、コントローラー、スコープ間でデータを共有したり、ルーティングによってページを変更したりする場合でもデータを共有できます。

次のようにリソース サービスを定義します。

app.factory("MyResource",function(){
    return {};
});

次に、そのサービスをディレクティブ (および必要に応じてコントローラー) に挿入し、このように使用できます。

One23SRCApp.directive('directive1', ['MyResource', function(MyResource) {
    return {
        restrict: "A",
        scope:true,
        link: function (scope, element, attrs) {
           var resource = MyResource;
           resource.name = 'Foo';
        }
    };
});
One23SRCApp.directive('directive2', ['MyResource', function(MyResource) {
    return {
        restrict: "A",
        link: function (scope, element, attrs) {
           var resource = MyResource;
           console.log(resource.name);
        }
    };
});

リソースが共有されているため、Directive2 は「Foo」をログに記録します。ただし、ディレクティブが正しい順序で実行されていることを確認してください!

**

各ディレクティブから親スコープへの双方向のデータ バインディングを行うこともできます (Chandermani の回答を参照)。 html 内の正確な場所です。

編集: 上記はコントローラーとルート間で情報を共有する場合に非常に便利ですが、stevuu の回答を確認してください。ディレクティブの方が良いようです（試したことはありませんが）。

于 2013-08-27T13:09:52.547 に答える
5

$rootScope.$broadcastディレクティブ全体で同期する必要があるアイテムを実行できます。

または、通信メカニズムとして機能するディレクティブ 1 分離スコープにオブジェクトを渡すこともできます。このオブジェクトで のようなサブ プロパティを変更するtablenameと、親スコープに影響します。

何かのようなもの

One23SRCApp.directive('directive1',function() {
    return {
        restrict: "A",
        scope:{tableconfig:'='},
        link: function (scope, element, attrs) {
           scope.tableconfig.tablename= "table";
        }
    };
});


One23SRCApp.directive('directive2',function() {
    return {
        restrict: "A",
           link: function (scope, element, attrs) {
           var tablename = scope.tableconfig.tablename;
        }
    };
})

HTMLは次のようになります

<table directive1 tableconfig='tableconfig'>
  <tr>
     <td>column1</td>
   <td>column1</td>
   </tr>
</table>

コントローラーにこのオブジェクトを定義する必要があります

$scope.tableconfig={};

于 2013-08-27T13:09:44.997 に答える
4

Chandermani のサンプルが動作しています。ただし、この方法では、ディレクティブに属性を割り当てる必要があり、もはや分離されません。これはスコープ上の汚染です...

私のアドバイスは、コントローラーを使用してこの方法で渡すことにより、分離されたスコープを共有することです。あなたの家、あなたのコード！コードを書く前によく考えてください。

One23SRCApp.directive('directive1',function() {
    return {
         restrict: "A",
         scope: true,
         controller : function($scope){
              $scope.tableconfig= {};
              this.config = function (){ 
                   return $scope.tableconfig;
              }
         },
         link: function (scope, element, attrs) {
             scope.tableconfig.tablename= "table";
         }
    }
});


One23SRCApp.directive('directive2',function() {
     return {
           restrict: "A",
           //^ -- Look for the controller on parent elements, not just on the local scope
           //? -- Don't raise an error if the controller isn't found
           require: "^directive1",
           link: function (scope, element, attrs) {
               var tablename = scope.config().tablename;
           }
    }
});

使用法

<!-- Notice, no need to share a scope as attribute -->
<div directive1>
    <div directive2>
    </div>
</div>
于 2014-10-24T12:59:53.437 に答える