В Angular 1.x как я могу получить доступ к методам контроллера из пользовательской директивы?

Question

В настоящее время я пытаюсь найти лучший способ получить доступ к двум методам управления из моей настраиваемой директивы. Мой текущий код выглядит так:

Родитель компоненты шаблон (navMenus.html):

<menu-toggle section="navItem" ng-if="navItem.type === 'toggle'"></menu-toggle> 

родительского компонент Controller (navMenus.controller.js):

... 
isOpen(section) { 
    return this.NavMenusFactory.isSectionSelected(section); 
} 

toggleOpen(section) { 
    this.NavMenusFactory.toggleSelectSection(section); 
} 
... 

Директива шаблон (menuToggle. HTML):

<md-button class="md-button-toggle" ng-click="vm.toggle()"> 
    {{ section.text | translate }} 
</md-button> 

<ul ng-show="vm.isOpen()" class="menu-toggle-list"> 
    <li ng-repeat="subItem in section.subItems"> 
    {{ subItem.text | translate }} 
    <menu-link section="subItem"></menu-link> 
    </li> 
</ul> 

Директива (menuToggle.directive.js):

... 
return { 
    restrict: 'AE', 
    template, 
    replace: true, 
    scope: { 
    section: '=', 
    }, 
    link(scope, element) { 
    $timeout(() => { 
     const $element = element; 


     scope.vm.toggle = function() { 
     console.log(scope.$parent.isOpen()); 
     }; 

     scope.isOpen = function() { 
     return $element.isOpen(scope.section); 
     }; 

     scope.toggle = function() { 
     $element.toggleOpen(scope.section); 
     }; 

    }); 
    } 
} 

Как я могу получить доступ к этим методам?

Answer 1

Поскольку существует сфера в вашей директиве, вы создали изолированную сферу. Поэтому для того, чтобы получить доступ к функции контроллера вы можете использовать событий

• Внутри директивы, создать $emit событие, на click события:

  scope.toggle = function toggle(){ 
  
      scope.$emit('EVENT_NAME', { data: true }) // here data is optional 
  
  } 
  

• В controller, вы может выполнять действие как:

  $scope.$on('EVENT_NAME', function(event, data){ 
  
      // here you can call the controller's method 
  
  }) 
  

Answer 2

Это лучший способ узнать, чтобы вызвать функцию контроллера из директивы.

/* Directive template */ 
<md-button class="md-button-toggle" ng-click="vm.toggle()"> 
    {{ section.text | translate }} 
</md-button> 

<ul ng-show="isOpen()" class="menu-toggle-list"> 
    <li ng-repeat="subItem in section.subItems"> 
    {{ subItem.text | translate }} 
    <menu-link section="subItem"></menu-link> 
    </li> 
</ul> 



/* Directive Code */ 
... 
return { 
    restrict: 'AE', 
    template, 
    replace: true, 
    scope: { 
    section: '=', 
    isOpen: '&' 
    }, 
    link(scope, element) { 
    $timeout(() => { 
     const $element = element; 


     scope.vm.toggle = function() { 
     console.log(scope.$parent.isOpen()); 
     }; 

     scope.isOpen = function() { 
     return $element.isOpen(scope.section); 
     }; 

     scope.toggle = function() { 
     $element.toggleOpen(scope.section); 
     }; 

    }); 
    } 
} 

/* in your view, you can call controller fn */ 

<menu-toggle section="navItem" is-open="isOpen()" ng-if="navItem.type === 'toggle'"></menu-toggle>