Передача обратного вызова между директивами в Angularjs - PullRequest
Новая
       7

Передача обратного вызова между директивами в Angularjs

0 голосов
/ 18 октября 2018

При простой передаче обратного вызова из шаблона страницы (с контроллером), этот ответ правильно объясняет, как отформатировать использование обратного вызова в шаблоне директивы со значением в виде объекта JSON, например, так:: 

<a data-ng-click="callback({image: url})"></a>

Но что произойдет, если директива просто передает обратный вызов другой директиве.
Должна ли она просто передать обратный вызов следующим образом: 

<another-directive data-ng-click="callback()"></another-directive>

Или должнапередать тот же формат объекта, как этот: 

<another-directive data-ng-click="callback({image: url})"></another-directive>

Или другой вариант?
Прямо сейчас ни одна из этих работ для меня.

1 Ответ

0 голосов
/ 18 октября 2018

Мне кажется, я понимаю, что вы пытаетесь выполнить, поэтому приведу пример.

У вас есть контроллер (myController), который вызывает директиву (myDirective), которая вызывает другуюдиректива (anotherDirective), и вы хотите передать функцию «обратного вызова» от myController до myDirective до anotherDirective.Вот как вы можете это сделать: 

angular
  .module('myApp', [])
  .controller('myController', ['$scope', function($scope) {
    $scope.foo = function(param) {
      alert('This function is declared on the main controller but called from a directive a few levels deep.  Parameter: ' + param);
    };
  }])
  .directive('myDirective', function() {
    return {
      template: `
        <h1>My Directive</h1>
        <another-directive callback="myFunction(b)"></another-directive>
      `,
      scope: {
        myFunction: '&'
      }
    }
  })
  .directive('anotherDirective', function() {
    return {
      template: `
        <h2>Another Directive</h2>
        <button data-ng-click="callback({b: {a: 'hello world'}})">Click Me</button>
      `,
      scope: {
        callback: '&'
      }
    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <my-directive my-function="foo(a)"></my-directive>
<div>

Ключ к этому начинается в директиве самого низкого уровня anotherDirective: 

<button data-ng-click="callback({b: {a: 'hello world'}})">Click Me</button>

Теперь вспомните, как был установлен callbackего родитель: 

<another-directive callback="myFunction(b)"></another-directive>

И как первоначально было объявлено myFunction в его родителе: 

<my-directive my-function="foo(a)"></my-directive>

Я изо всех сил пытаюсь найти способ объяснить это должным образом, но с этимНапример, вы должны увидеть шаблон с выражениями, всплывающими у каждого родителя.

...