コントローラtranscludeを使用した構文

Question

私はdirectuve 'angle-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 outside、inside、 'template-url'は同じです。

スコープを分離して変更すると、テンプレートの$ ctrlコンテキストが失われています。テンプレートは、どのように私は$のCTRLから「angularPopover」ディレクティブにいくつかの関数を渡すことができNG-transclude属性を経由して

scope: { 
    onOpen: "&onOpen" 
} 

を追加していますか？

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);