Запустить атрибут как функцию директивы angularjs - PullRequest
Новая
       7

Запустить атрибут как функцию директивы angularjs

0 голосов
/ 24 декабря 2018

У меня есть этот шаблон 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 в мой файл B.directive.js в мой файл A.directive.js?

Любой источник или документация, пожалуйста.

Примечание: Я не буду использовать пользовательское событие, если это возможно.

Ответы [ 3 ]

0 голосов
/ 24 декабря 2018

Итак, вы хотите запустить какой-либо метод дочерней директивы из родительской директивы.К сожалению, AngularJS не имеет встроенной поддержки для такого рода проблем.Вот некоторые обходные пути для вашего рассмотрения

  1. Используйте встроенный диспетчер событий, вот хорошее объяснение.
  2. Подход на основе компонентов $ onChanges, описанный здесь
  3. Каждый угловой сервис является одиночным, поэтому вы можете создать сервис , предназначенный для родительскогообщение с ребенком.

Каждый подход довольно уродлив!

  1. Диспетчер событий - слишком большое количество событий может значительно замедлить работу приложения.Вы можете получить сотни событий, которые действительно сложно поддерживать.
  2. $ onChanges - код выглядит уродливо, сложно поддерживать.
  3. Вам нужен новый сервис для каждого случая, сложноподдерживать.

Я полагаю, что есть некоторые причины, по которым он не поддерживается изначально.Что если у вас есть две или более директивы <user-form reset-user-fn=""></user-form> в директиве shopAppFormCustomer parent?И вы хотите позвонить на resetUserFn одной конкретной директивы userForm, как отличить одну userForm от другой userForm?

Это как-то поддерживалось в Angualar 2 и выше, но решение также не идеально.Таким образом, вам остается только выбрать, какое решение из вышеперечисленных является менее болезненным для вас, и разобраться с ним.

0 голосов
/ 24 декабря 2018 
<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;
        });
    } 
  }        
}
0 голосов
/ 24 декабря 2018

Вам следует создать общую службу , чтобы вы могли использовать все, что находится внутри службы, где угодно.В этом случае функция может использоваться как в fileA.directive.js, так и в fileB.directive.js.

...