angularjs - 関数 - templateurl angular




AngularJSディレクティブで定義されたメソッドを呼び出す方法は? (9)

Oliverの答えを踏まえて、ディレクティブの内部メソッドにアクセスする必要は必ずしもないかもしれません。そのような場合は、空白のオブジェクトを作成し、 control attrをディレクティブに追加してエラーが発生しないようにする必要はないでしょう( cannot set property 'takeTablet' of undefined )。

また、ディレクティブ内の他の場所でこのメソッドを使用することもできます。

scope.controlが存在することを確認するためのチェックを追加し、明らかになったモジュールパターンと同様の方法でメソッドを設定します

app.directive('focusin', function factory() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>A:{{control}}</div>',
    scope: {
      control: '='
    },
    link : function (scope, element, attrs) {
      var takenTablets = 0;
      var takeTablet = function() {
        takenTablets += 1;  
      }

      if (scope.control) {
        scope.control = {
          takeTablet: takeTablet
        };
      }
    }
  };
});

私は命令を持っています、ここにコードです:

.directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {

            var center = new google.maps.LatLng(50.1, 14.4); 
            $scope.map_options = {
                zoom: 14,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            // create map
            var map = new google.maps.Map(document.getElementById(attrs.id), $scope.map_options);
            var dirService= new google.maps.DirectionsService();
            var dirRenderer= new google.maps.DirectionsRenderer()

            var showDirections = function(dirResult, dirStatus) {
                if (dirStatus != google.maps.DirectionsStatus.OK) {
                    alert('Directions failed: ' + dirStatus);
                    return;
                  }
                  // Show directions
                dirRenderer.setMap(map);
                //$scope.dirRenderer.setPanel(Demo.dirContainer);
                dirRenderer.setDirections(dirResult);
            };

            // Watch
            var updateMap = function(){
                dirService.route($scope.dirRequest, showDirections); 
            };    
            $scope.$watch('dirRequest.origin', updateMap);

            google.maps.event.addListener(map, 'zoom_changed', function() {
                $scope.map_options.zoom = map.getZoom();
              });

            dirService.route($scope.dirRequest, showDirections);  
        }
    }
})

私はユーザアクションに対してupdateMap()を呼びたいと思います。 アクションボタンはディレクティブにはありません。

コントローラーからupdateMap()を呼び出す最良の方法は何ですか?


scope。$ parentを使用して、指示関数に呼ばれる関数を関連付ける

angular.module('myApp', [])
.controller('MyCtrl',['$scope',function($scope) {

}])
.directive('mydirective',function(){
 function link(scope, el, attr){
   //use scope.$parent to associate the function called to directive function
   scope.$parent.myfunction = function directivefunction(parameter){
     //do something
}
}
return {
        link: link,
        restrict: 'E'   
      };
});

HTMLで

<div ng-controller="MyCtrl">
    <mydirective></mydirective>
    <button ng-click="myfunction(parameter)">call()</button>
</div>

おそらく、これは最良の選択ではないかもしれませんが、あなたの指示のスコープおよび/またはコントローラにアクセスするためには、 $("#element").isolateScope() angular.element("#element").isolateScope()または$("#element").isolateScope()


アクションボタンがディレクティブと同じコントローラ$scopeを使用すると仮定すると、link関数内の$scope関数updateMapを定義するだけです。 コントローラは、アクションボタンがクリックされると、その機能を呼び出すことができます。

<div ng-controller="MyCtrl">
    <map></map>
    <button ng-click="updateMap()">call updateMap()</button>
</div>
app.directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {
            $scope.updateMap = function() {
                alert('inside updateMap()');
            }
        }
    }
});

fiddle

@ FlorianFのコメントによると、ディレクティブが分離されたスコープを使用する場合、事態はより複雑になります。 これを有効にする方法の1つは、 set-fn属性をmapディレクティブに追加し、ディレクティブ関数をコントローラに登録することです。

<map set-fn="setDirectiveFn(theDirFn)"></map>
<button ng-click="directiveFn()">call directive function</button>
scope: { setFn: '&' },
link: function(scope, element, attrs) {
    scope.updateMap = function() {
       alert('inside updateMap()');
    }
    scope.setFn({theDirFn: scope.updateMap});
}
function MyCtrl($scope) {
    $scope.setDirectiveFn = function(directiveFn) {
        $scope.directiveFn = directiveFn;
    };
}

fiddle


ページコントローラーでディレクティブのコントローラーを取得する方法:

  1. ディレクティブコントローラへの参照をDOM要素から取得するカスタムディレクティブを作成します。

    angular.module('myApp')
        .directive('controller', controller);
    
    controller.$inject = ['$parse'];
    
    function controller($parse) {
        var directive = {
            restrict: 'A',
            link: linkFunction
        };
        return directive;
    
        function linkFunction(scope, el, attrs) {
            var directiveName = attrs.$normalize(el.prop("tagName").toLowerCase());
            var directiveController = el.controller(directiveName);
    
            var model = $parse(attrs.controller);
            model.assign(scope, directiveController);
        }
    }
    
  2. ページコントローラーのhtmlでそれを使用します。

    <my-directive controller="vm.myDirectiveController"></my-directive>
    
  3. ページコントローラでディレクティブコントローラを使用します。

    vm.myDirectiveController.callSomeMethod();
    

注:指定されたソリューションは要素ディレクティブのコントローラに対してのみ機能します(タグ名は、必要なディレクティブの名前を取得するために使用されます)。


メソッド名をディレクティブに指定して、コントローラから呼び出す対象を定義しますが、スコープを分離することはできません。

angular.module("app", [])
  .directive("palyer", [
    function() {
      return {
        restrict: "A",
        template:'<div class="player"><span ng-bind="text"></span></div>',
        link: function($scope, element, attr) {
          if (attr.toPlay) {
            $scope[attr.toPlay] = function(name) {
              $scope.text = name + " playing...";
            }
          }
        }
      };
    }
  ])
  .controller("playerController", ["$scope",
    function($scope) {
      $scope.clickPlay = function() {
        $scope.play('AR Song');
      };
    }
  ]);
.player{
  border:1px solid;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="playerController">
    <p>Click play button to play
      <p>
        <p palyer="" to-play="play"></p>
        <button ng-click="clickPlay()">Play</button>

  </div>
</div>


分離スコープを使用する場合は、コントローラースコープの変数の双方向バインディングを使用してコントロールオブジェクトを渡すことができます。 また、同じコントロールオブジェクトを持つページ上の同じディレクティブの複数のインスタンスを制御することもできます。

angular.module('directiveControlDemo', [])

.controller('MainCtrl', function($scope) {
  $scope.focusinControl = {};
})

.directive('focusin', function factory() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>A:{{internalControl}}</div>',
    scope: {
      control: '='
    },
    link: function(scope, element, attrs) {
      scope.internalControl = scope.control || {};
      scope.internalControl.takenTablets = 0;
      scope.internalControl.takeTablet = function() {
        scope.internalControl.takenTablets += 1;
      }
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="directiveControlDemo">
  <div ng-controller="MainCtrl">
    <button ng-click="focusinControl.takeTablet()">Call directive function</button>
    <p>
      <b>In controller scope:</b>
      {{focusinControl}}
    </p>
    <p>
      <b>In directive scope:</b>
      <focusin control="focusinControl"></focusin>
    </p>
    <p>
      <b>Without control object:</b>
      <focusin></focusin>
    </p>
  </div>
</div>


少し遅れましたが、これは分離されたスコープとディレクティブの関数を呼び出す "イベント"を持つソリューションです。 このソリューションは、 satchmorun このSO投稿に触発され、モジュールとAPIを追加します。

//Create module
var MapModule = angular.module('MapModule', []);

//Load dependency dynamically
angular.module('app').requires.push('MapModule');

ディレクティブと通信するためのAPIを作成します。 addUpdateEventはイベントをイベント配列に追加し、updateMapはすべてのイベント関数を呼び出します。

MapModule.factory('MapApi', function () {
    return {
        events: [],

        addUpdateEvent: function (func) {
            this.events.push(func);
        },

        updateMap: function () {
            this.events.forEach(function (func) {
                func.call();
            });
        }
    }
});

(たぶんイベントを削除する機能を追加する必要があります。)

ディレクティブでMapAPIへの参照を設定し、MapApi.updateMapが呼び出されたときに$ scope.updateMapをイベントとして追加します。

app.directive('map', function () {
    return {
        restrict: 'E', 
        scope: {}, 
        templateUrl: '....',
        controller: function ($scope, $http, $attrs, MapApi) {

            $scope.api = MapApi;

            $scope.updateMap = function () {
                //Update the map 
            };

            //Add event
            $scope.api.addUpdateEvent($scope.updateMap);

        }
    }
});

"メイン"コントローラで、MapApiへの参照を追加し、MapApi.updateMap()を呼び出してマップを更新します。

app.controller('mainController', function ($scope, MapApi) {

    $scope.updateMapButtonClick = function() {
        MapApi.updateMap();    
    };
}

特に、あなたがこの通信をいくつかのレベル(コントローラ、ディレクティブなど)にチェーンする必要がある場合は、混乱した "スパゲッティ"コードにつながる可能性があります。ネストされたディレクティブなど)

もともと私たちはこの道を歩いていましたが、より多くの調査をした結果、それはもっと理にかなっていて、保守可能で読みやすいコードで、イベントを宣言し、プロパティを公開しました。これらの変更に対応してコミュニケーションを取る必要のある指示やその他のコントロール。

この抽象化は、AngularJSの依存性注入フレームワークで非常にうまく機能し、イベントに反応する必要のあるアイテムにサービスを注入できます。 Angular.jsファイルを見ると、そこにあるディレクティブもこのようにサービスと$ watchを使用していることがわかります。隔離されたスコープでイベントを公開することはありません。

最後に、相互に依存するディレクティブ間で通信する必要がある場合は、それらのディレクティブ間で通信手段としてコントローラを共有することをお勧めします。

ベストプラクティスのためのAngularJSのWikiにもこれが書かれています:

アトミックイベントの場合は$ broadcast()、$ emit()、$ on()のみを使用します。アプリケーション全体でグローバルに関連するイベント(ユーザーの認証やアプリケーションの終了など)。 モジュール、サービス、またはウィジェット固有のイベントが必要な場合は、サービス、ディレクティブ・コントローラー、またはサード・パーティー・リブを考慮する必要があります

  • $ scope()はイベントの必要性を置き換えるはずです
  • サービスの注入やメソッドの直接呼び出しは、直接通信にも役立ちます
  • ディレクティブは、ディレクティブコントローラを介して互いに直接通信することができます




angularjs-directive