テンプレートのコントローラーメソッドからの呼び出し方法

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> 

プライマリコントローラは、私が呼びたい「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

一つの可能​​な回避策はディレクティブで

を注入$rootScope角度イベントを使用している、その後のようなもの：コントローラで

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

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