6

次のようなものを書くことができるように、マップ コンポーネントを作成するためのディレクティブを作成しようとしています。

<map></map>

ディレクティブは次のようになります。

angular.module('myApp')
  .directive('map', function (GoogleMaps) {
    return {
      restrict: 'E',
      link: function(scope, element, attrs) {
        scope.$watch('selectedCenter', function() {
          renderMap(scope.selectedCenter.location.latitude, scope.selectedCenter.location.longitude, attrs.zoom?parseInt(attrs.zoom):17);
        });

      function renderMap(latitude, longitude, zoom){
          GoogleMaps.setCenter(latitude, longitude);
          GoogleMaps.setZoom(zoom);
          GoogleMaps.render(element[0]);
      }
    }
  };
});

問題は、ディレクティブ内の 'watch' が、コンポーネントの再利用性を考えるとあまりよく見えないことです。したがって、次のようなことができるのが最善だと思います。

<map ng-model="selectedCenter.location"></map>

しかし、カスタム ディレクティブ内で角度ディレクティブを使用するのが良いことなのか、カスタム ディレクティブのリンク関数の ng-model 属性で示されているオブジェクトを取得する方法がわかりません。

4

3 に答える 3

4

あなたはそのようなことをする必要があります

angular.module('myApp')
  .directive('map', function (GoogleMaps) {
    return {
      restrict: 'E',
      scope: {
        ngModel: '=' // set up bi-directional binding between a local scope property and the parent scope property 
      },

今のところ、scope.ngModel を安全に見ることができ、関連する値がディレクティブの外で変更されるたびに通知されます。

scope プロパティをディレクティブに追加すると、新しい分離スコープが作成されることに注意してください。

ここでディレクティブに関するAngularドキュメントを参照できます。特に、スコープ プロパティの詳細については、「ディレクティブ定義オブジェクト」セクションを参照してください。

最後に、このチュートリアルを使用して、アプリからディレクティブとその反対への双方向通信でディレクティブを実現するためのすべての資料を見つけることもできます。

于 2013-09-14T11:05:33.657 に答える
1

これを達成する簡単な方法の1つは、次のようにすることです

<map model="selectedCenter"></map>

ディレクティブ内でウォッチをに変更します

scope.$watch(attrs.model, function() {

そして、あなたは行ってもいいです

于 2013-09-14T10:58:55.913 に答える