読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

【AngularJS1.4.x】 DirectiveからControllerのメソッドを呼ぶための設定

AngularJS AngularJS1.4.x JavaScript

スポンサードリンク

すごくハマりました。

やりたいこととして、とあるdirectiveからとあるcontrollerのメソッドを実行したかった。

が、方法がわからずにすごく時間がかかりました。とりあえずできたのでメモ。

環境

  • chrome 51.0.2704.103 (64-bit)
  • angularjs 1.4.9

実装

app.controller('myController', function($scope) {
    $scope.controllerMethod = funciton() {
        // controllerの処理
    };
});

app.directive('myDirective', ['$timeout', '$interval', function($timeout, $interval) {

    var getContentUrl = function() {
        return './js/template/template.html';
    };

    return {
        restrict: 'A',
        require: '?ngModel',
        scope: {
            ngModel: '=',
            ngModelDisplay: '='
        },
        templateUrl: getContentUrl(),
        controller: 'myController', // ここ大事!
        link: function(scope, element, attrs, ngModel) {
          // 省略
          scope.$apply('controllerMethod()');
        }
    }
}]);

コードの通りの実装をすればいける(はず)

directiveからcontrollerのメソッドを使う場合は、linkの中でscope.$applyにメソッド名を渡せばよい。

次に大切なことは、directiveのreturnで返すパラメータの中のcontrollerの箇所。ここをdirectiveから使用したいcontrollerのメソッドが存在するcontroller名を指定しないと使えないことがわかった。今回はこれにすごくハマりました。。。orz

仕組みはいまいちまだよくわかっていないが、とりあえずこれでできるようになりましたとさ。。。続く。