触发属性为angularjs指令功能(Trigger an attribute as functio

我有这样的HTML模板到fileA.directive.html：

<md-button ng-click="resetForm()" class="btn btn-primary">Reset form</md-button>
<user-form reset-user-fn=""></user-form>

然后进入我的fileA.directive.js：

app.directive("shopAppFormCustomer", function() {
    return {
      restrict: "E",
      replace: true,
      templateUrl: "fileA.directive.html",
      scope: {},
      controller: [
        "$scope",
        function($scope) {
          $scope.resetForm = function () {
             // want to call reset-user-fn here
          }
        }
      ]
    };
  })

进入我的fileB.directive.js，我有userForm指令

app.directive("userForm", function() {
  return {
    restrict: "E",
    replace: true,
    templateUrl: "fileB.directive.html",
    scope: {resetUserFn: "=" },
    controller: [
       "$scope",
        function ($scope) {
          $scope.resetUserFn = function () {
             // reset goes here
          }
        }
    ]
  }

我的问题是：

我怎样才能触发属性resetUserFn到我fileB.directive.js到我fileA.directive.js？

所有源代码或文档请。

注：我不会使用自定义事件，如果有可能。

Answer 1:

所以，你要触发从父指令子指令的一些方法。 不幸的是，AngularJS有这样那样的问题，没有原生支持。 这里有一些解决方法供大家参考

1. 使用内置的事件调度， 这里是一个很好的解释。
2. 基于组件的$ onChanges方法， 这里介绍
3. 每个角服务是单例，所以你可以创建一个服务 ，用于家长对孩子的沟通。

每一种方法是相当难看！

1. 事件调度 - 太多的事件可能应用显著放缓。 你可能最终高达数百这实在是难以维持的事件。
2. $ onChanges - 代码看起来丑陋，难以维护。
3. 你需要一个新的服务，为每一种情况下，很难维持。

我想，有一些原因，它本身不支持。 如果你有两个或两个以上<user-form reset-user-fn=""></user-form>下指令shopAppFormCustomer父指示？ 而你要打电话resetUserFn一个particlurar的userForm指令，如何区分一个userForm从另一个userForm ？

这在某种程度上支持Angualar 2高，但解决的办法也不是完美的。 所以，你必须只选择哪种解决方案上面是你痛苦少和处理。

Answer 2:

您应该创建一个共同的服务 ，让你可以使用任何你想要的服务里面的一切。 在这种情况下，可以在两个fileA.directive.js和fileB.directive.js使用的功能。

Answer 3:

<md-button ng-click="resetForm()" class="btn btn-primary">
  Reset form
</md-button>
̶<̶u̶s̶e̶r̶-̶f̶o̶r̶m̶ ̶r̶e̶s̶e̶t̶-̶u̶s̶e̶r̶-̶f̶n̶=̶"̶"̶>̶
<user-form reset-user-fn="resetForm">
</user-form>

所述<user-form>指令分配父范围属性resetForm向函数的引用。 在ng-click指令调用该函数。

为了避免内存泄漏，一定要null当分离范围破坏财产。

app.directive("userForm", function() {
  return {
    restrict: "E",
    templateUrl: "fileB.directive.html",
    scope: {resetUserFn: "=" },
    controller: function ($scope) {
        $scope.resetUserFn = function () {
            // reset goes here
        };
        $scope.$on("$destroy", function() {
            $scope.resetUserFn = null;
        });
    } 
  }        
}

文章来源: Trigger an attribute as function of angularjs directive