Question

我将此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

您应该创建公用的service，以便可以在服务中的任何位置使用所有内容。在这种情况下，可以在fileA.directive.js和fileB.directive.js中使用的函数。

Answer 2

所以您想从父指令中触发子指令的某些方法。不幸的是，AngularJS没有此类问题的本地支持。这里有一些解决方法供您考虑

使用内置的事件调度程序here is很好的解释。
基于组件的$ onChanges方法，described here
每个角度服务都是一个单例，因此您可以创建一个service，用于父母与孩子之间的通信。

每种方法都很难看！

事件调度程序-太多事件可能会大大降低应用程序的速度。您最终可能会遇到数百个难以维护的事件。
$ onChanges-代码看起来丑陋，难以维护。
每种情况下都需要一项新服务，很难维护。

我认为有一些原因不能本地支持它。如果您在<user-form reset-user-fn=""></user-form>父指令下有两个或多个shopAppFormCustomer指令怎么办？并且您想调用一个特别的resetUserFn指令的userForm，如何区分一个userForm与另一个userForm？

这在Angualar 2和更高版本中得到了某种支持，但是该解决方案也不是完美的。因此，您只需要选择上面的哪种解决方案对您来说就不那么痛苦了，并加以解决。

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;
        });
    } 
  }        
}

触发属性作为angularjs指令的功能

3 个答案: