Question

我想在指令控制器上调用一个函数，从父控制器使用它的id访问实例：

<my-directive id="id1" />

var dirController = getDirectiveByID("id1");
dirController.someFunc();

您认为最简单的方法是什么？我看过的大多数解决方案都很丑陋/过于复杂。

由于

Answer 1

我可以理解你想要实现的目标，不幸的是，如果你想特别从指令公开控制器API，我知道的正确方法是在指令中使用require 但指令指向指令且仅向下。

由于您的my-directive可以访问父作用域，可能它是从父作用域继承的，实现所需内容的最简单方法是将对象初始化为父控制器内的控件接口

$scope.control = {};

然后在你想要暴露给该控制界面的myDirective追加函数中，例如

$scope.control.someFn = function() {
   ...
}

因此，在您的父控制器中，您应该能够访问从指令中公开的那些函数。

Answer 2

另一个解决方案是在控制器中注册指令，然后激活你需要的函数（就像在观察者模式中一样）。

这是一个例子，你发现它也是fiddle

<body ng-app="app">
  <div ng-controller="parentController" >
    <h1>
      {{title}}
    </h1>
    <child id="John"></child>
    <child id="Heisenberg"></child>
    <child id="Red"></child>
    <ul>
      <li ng-repeat="c in childs">
        I'm {{c.scope.nameFunction()}}
        <button ng-click="fireFunction(c.id,'nameFunction')">Say my name</button>
      </li>
    </ul>
  </div>
</body>

<强>控制器

var app = angular.module('app', []);
app.controller("parentController", function($scope,$rootScope){
    $scope.title = "Title";
  $scope.childs=[];
  $scope.fireFunction = function(id, functionName){
    for(i=0; i<$scope.childs.length; i++)
    { 
        if($scope.childs[i].id===id){
             window.alert($scope.childs[i].scope[functionName]());
      }
    }
  }
});

<强>指令：

app.directive('child', function() {
  var __controller__ = {
    restrict: 'E',
    scope:{
        id:"@"
    },
    link: function ($scope, element, attrs)  {
        console.log(attrs.id);
      $scope.$parent.childs.push({id:attrs.id, scope: $scope});
      $scope.nameFunction = function(){
        return $scope.id
        }
    },
    template: '<div>' + 'Hello Dad ! i am is {{id}}' +'</div>'
  }
  return __controller__
})

在指令控制器上调用函数

2 个答案: