Question

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

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

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

我已经尝试了一些使用我最近尝试下方的已发布代码的内容。但是，此代码会产生错误

要求新的/隔离范围：

首先是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>

我的主控制器使用＆＃34; eventClick＆＃34;方法我想打电话。

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

然后＆＃34; SessionList＆＃34;指令;

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，在事件的click事件中我有这个;

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

如果我包括这个;

scope: { someCtrlFn: '&callbackFn' },

我收到之前引用的错误。如果我将其删除，那么页面呈现但是＆＃34; eventClick＆＃34;方法永远不会在我的控制器中运行。

Answer 1

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

在指令中注入$rootScope，然后输入：

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

在控制器中

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

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

1 个答案: