控制器语法与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);