Javascript 访问指令的最佳模式'；s控制器

“form aka ngForm”指令可以通过表单名称访问

<form name="testForm"> </form>

和HTML格式：

<button ng-show="testForm.$valid>

基于“form”指令的功能，我为此编写了一些简单的hack——它在name属性定义的变量范围内发布指令的公共api：

app.directive('list', function () {
        return {
            restrict: 'E',
            controller: function ($scope, $element, $attrs) {

                // check if name of component does not pollute scope
                if ($attrs.name) {
                    if (angular.isDefined($scope[$attrs.name])) {
                        throw "Error component already defined with name: " + $attrs.name;
                    } else {

                      // publish controller object aka public API

                      scope[$attrs.name] = {
                               date: new Date(), 
                               myFunction: function(){}
                      };
                    }
                }
            },
            template: '<ul></ul>'
        }
    });

但它不适用于隔离作用域指令-解决方法是将api对象作为具有双向绑定的属性传递，如本问题所述：

我还考虑过在服务中定义api，但这真的很难看——服务必须以某种方式来定义 附加到指令的正确DOM元素

所以我的问题是-从HTML和其他控制器访问指令、方法和属性的最佳模式是什么？使指令成为真正的UI组件

---

或者更简单的问题-如何从另一个控制器或HTML中的另一个表达式访问指令控制器，就像我们可以通过“require”从另一个指令访问指令控制器一样。

您应该使用指令控制器并通过发布它

即使作用域是孤立的，它仍然具有指向父作用域的

$parent

属性。因此，对于您的问题，解决方案可能如下所示：

$scope.testForm.$valid 

angular.module('sample', []).directive("foo", function() {
  return {
    controller: function($scope, $element, $attrs) {
      $scope.$parent[$attrs.foo] = this;
      this.apiMethodName = function() {
          // ...
      };
    },
    scope: {},
    restrict: 'A'
  };
});

---

在Plunker上试用：

我熟悉“as”语法，但如何将其用于指令控制器？我知道了，我该如何从另一个控制器（不是从html）访问它呢。实际上控制器不是正确的方法。您应该创建一个服务，并通过服务在控制器之间共享公共代码。请更新问题您的原始问题是什么。

app.directive('list', function () {
        return {
            restrict: 'E',
            controller: function ($scope, $element, $attrs) {

                // check if name of component does not pollute scope
                if ($attrs.name) {
                    if (angular.isDefined($scope[$attrs.name])) {
                        throw "Error component already defined with name: " + $attrs.name;
                    } else {

                      // publish controller object aka public API

                      scope[$attrs.name] = {
                               date: new Date(), 
                               myFunction: function(){}
                      };
                    }
                }
            },
            template: '<ul></ul>'
        }
    });

<list name="myList"></list>
<button ng-click="myList.myFunction()">

$scope.myList.myFunction();

angular.module('sample', []).directive("foo", function() {
  return {
    controller: function($scope, $element, $attrs) {
      $scope.$parent[$attrs.foo] = this;
      this.apiMethodName = function() {
          // ...
      };
    },
    scope: {},
    restrict: 'A'
  };
});