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

すごくハマりました。

やりたいこととして、とある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

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