控制器語法與transclude

Question

我試圖自定義directuve'角度popover'。

<a angular-popover 
    direction="bottom" 
    template-url="assets/app/common/templates/popovers/page-choose.html" 
    class="content_paginator_trigger openPaginator inline-block pull-left"> 
    <span class="content_paginator_trigger_text popoverTriger"> 
     Page {{$ctrl.data.current_page}} of {{$ctrl.data.last_page || 1}} 
    </span> 
</a> 

該指令使用繼承範圍。

scope: true 

$ ctrl外部，裏面和​​'template-url'是一樣的。

如果我改變它在隔離範圍，然後我失去模板中的$ ctrl上下文。模板通過ng-transclude屬性添加

scope: { 
    onOpen: "&onOpen" 
} 

如何將$ ctrl的一些函數傳遞給'angularPopover'指令？

Answer 1

您可以創建一個由控制器和指令調用的服務。

(function (ng) { 
 
    'use strict'; 
 

 
    ng.module('ServiceDemo') 
 
    .service('DemoService', DemoService) 
 
    .controller('DemoController', DemoController) 
 
    .directive('DemoDirective', DemoDirective); 
 

 
    function DemoService() { 
 
    var self = this; 
 

 
    self.onOpen = onOpen; 
 

 
    function onOpen() { 
 
     console.log('onOpen called!'); 
 
    } 
 
    } 
 

 
    function DemoController (DemoService) { 
 
    var demoControllerVM = this; 
 

 
    demoControllerVM.onOpen = DemoService.onOpen; 
 
    } 
 

 
    function DemoDirective (DemoService) { 
 
    return { 
 
     restrict: 'A', 
 
     scope: {}, 
 
     templateUrl: 'path/to/directive/template.html', 
 
     controllerAs: 'demoDirectiveVM', 
 
     bindToController: true, 
 
     controller: function ($scope, $element, $attrs) { 
 
     var demoDirectiveVM = this; 
 

 
     demoDirectiveVM.onOpen = DemoService.onOpen; 
 
     } 
 
    }; 
 
    } 
 
})(angular);