从模板中的指令调用控制器方法

Question

我有一个位于模板中的指令，然后包含在页面中。

如果我将我的指令直接放在我的页面上，那么在单击按钮时我可以在我的控制器中调用一个方法。

但是，当我将指令放在模板中，然后将模板放在页面上时，我无法再从指令调用控制器中的方法。

我已经用我最近一次尝试下面发布的代码尝试了很多事情。但是，此代码会产生错误

asking for new/isolated scope on:

所以HTML先；

这是我的 HTML 页面。

<session-list trackid='san'></session-list>

这是模板HTML；

<div class="container col-sm-12 col-xs-12">
    <div>Session list template for {{trackid}}</div>
    <session-calendar callback-fn="ctrlFn()"></session-calendar>
</div>

我的主控制器看起来像这样，我想调用 "eventClick" 方法。

angular.module('GAP.viewsessions', ['ngRoute'])
.controller('viewsessionsCtrl', ['$scope', function($scope){ 
    $scope.eventClick = function(eventData){
        console.log(eventData);
    }
}]);

然后"SessionList"指令；

angular.module("GAP.sessionList", [])
.directive("sessionList", function(){
    return {
        restrict: 'E',
        link: function(scope, element, attributes){
        },
        scope: {
            trackid: '@'
        },

        templateUrl: '/templates/sessionlist.html', // or use a path to a html file like 'path_to/template.html'
        replace: true,
    };
})

另一个指令是 FullCalendar，在事件的点击事件中我有这个；

            eventClick: function(calEvent, jsEvent, view) {
                scope.someCtrlFn();
                if (scope.eventClick){
                    scope.eventClick(calEvent.data);
                }
            },

如果我包括这个；

scope: { someCtrlFn: '&callbackFn' },

我得到了之前引用的错误。如果我省略它，那么页面会呈现，但 "eventClick" 方法在我的控制器中永远不会运行。

Answer 1

一种可能的解决方法是使用 angular 事件

在指令中注入 $rootScope 然后像这样：

$rootScope.$broadcast('cal-event-clicked', eventData)

在控制器中

$scope.$on('cal-event-clicked', function(evt, data){
   $scope.eventClick(data)
})

从模板中的指令调用控制器方法

Calling controller method from directive in template

angularjs

angularjs-directive