Question

我们假设我有一款名为myApp的应用。菜单组件有一个指令。该指令在其上定义了一个控制器。现在，从另一个加载视图的控制器，我想调用该菜单指令的控制器的方法。

代码看起来是什么样的？另一个控制器如何在菜单指令的控制器上调用方法？

Answer 1

我认为问题在于，当您应该将某个功能绑定到controller -> directive的某个委托调用时，您正试图controller <- directive。

有关此示例，您可以查看angular-ui/bootstrap's tabs directive onSelect和onDeselect：

.directive('tab', ['$parse', function($parse) {
  return {
    require: '^tabset',
    restrict: 'EA',
    replace: true,
    templateUrl: 'template/tabs/tab.html',
    transclude: true,
    scope: {
      active: '=?',
      heading: '@',
      onSelect: '&select', //This callback is called in contentHeadingTransclude
                          //once it inserts the tab's content into the dom
      onDeselect: '&deselect'
    },
    // etc.

使用&表达式允许您将函数绑定为回调。

此用法的一个示例是目标控制器中的范围限制函数：

$scope.selectedTab = function(){ alert('woohoo'); };

在视图中“绑定”指令的功能：

<tab select="selectedTab()">

tabs指令还有一个很好的例子，说明如何在两个不同的指令控制器之间进行通信。 See tabset controller's ctrl.select。 tab指令要求父tabSet控制器具有require：

.directive('tab', ['$parse', function($parse) {
  return {
    require: '^tabset',

tab指令可以在编译函数中访问tabset控制器的select函数：

compile: function(elm, attrs, transclude) {
  return function postLink(scope, elm, attrs, tabsetCtrl) {
    scope.$watch('active', function(active) {
      if (active) {
        tabsetCtrl.select(scope);
      }
    });

    scope.disabled = false;
    if ( attrs.disabled ) {
      scope.$parent.$watch($parse(attrs.disabled), function(value) {
        scope.disabled = !! value;
      });
    }

    scope.select = function() {
      if ( !scope.disabled ) {
        scope.active = true;
      }
    };

    tabsetCtrl.addTab(scope);
    scope.$on('$destroy', function() {
      tabsetCtrl.removeTab(scope);
    });

    //We need to transclude later, once the content container is ready.
    //when this link happens, we're inside a tab heading.
    scope.$transcludeFn = transclude;
  };
}

因此，你有如何从一些非指令控制器执行代码，因为你的指令中发生了一些动作，以及如何作为指令require约束的结果执行一些指令间函数。

编辑：对于任何感兴趣的人，这里是指令表达式的文档：http://docs.angularjs.org/api/ng/service/ $ compile＃comprehensive-directive-api

Angular：从单独的控制器调用指令控制器功能

1 个答案: