在Angular 1.x中，如何從自定義指令訪問控制器方法？

Question

我目前正試圖找出從我的自定義指令中訪問兩個控制器方法的最佳方法。我當前的代碼看起來像這樣：

父組件模板（navMenus.html）：

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

父組件控制器（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>