Передайте функцию директиве, а затем вызовите ее с параметрами

У меня есть директива (показать youtube video), которая должна использовать функцию как атрибут, чтобы иметь возможность запускать ее внутри функции ссылки.Передайте функцию директиве, а затем вызовите ее с параметрами

Внутри HTML я написал (в нефрите)

div(ng-controller="videoPageCtrl") 
    ... 
    div(my-youtube,id='aaa',url='KEHxHr-Ih9w',on-change="doEventsOnChange")

Мой контроллер и директивы выглядеть следующим образом

app 
.directive('myYoutube', function($sce, $timeout) { 
    return { 
     restrict: 'A', 
     scope: { 
      url: '@', 
      id: '@', 
      onChange: '&', 
     }, 
     link: function(scope) { 
      $timeout(function() { 
       scope.player = new YT.Player(scope.id, { 
        videoId: scope.url, 
        events: { 
         'onStateChange': function(state) { 
          console.log('state changed to', state, scope.id, scope.onChange); 
          scope.onChange(state, scope.id); 
         } 
        } 
       }); 
      }, 5000); 
     } 
    }; 
}) 
.controller('videoPageCtrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) { 
    $scope.doEventsOnChange = function(state, id) { 
     console.log(id, state, 'launched from controller!'); 
    }; 
}]);

Проблема заключается в том, что я не могу передать id и state и запустить функцию doEventsOnChange , В результате в консоли хром-детектора я могу видеть только линии state changed to, но нет launched from controller! строк с переданными id и state.

Что я делаю неправильно?

источник

2016-03-15 kaytrance

Вы должны использовать onChange: '&', если вы хотите использовать эту функцию в шаблоне своей директивы, используйте onChange: '=', если вы просто хотите передать функцию в область действия директивы.

Обязательная привязка позволяет директиве инициировать оценку выражения в контексте исходной области в определенное время. Любое юридическое выражение разрешено, включая выражение, содержащее вызов функции. Из-за этого привязки & идеально подходят для привязки функций обратного вызова к директивному поведению.

источник

2016-03-15 08:06:31

Итак, если бы у меня был шаблон в моей директиве, я должен был использовать '&'? – kaytrance

Если у вас есть шаблон в вашей директиве, и вы хотите называть его, давайте скажем ng-click, да. Если вы просто хотите использовать его в контроллере директивы, используйте '=' –

@MartijnWelker. Создав изолированную область действия для этой директивы, область не будет одинаковой. Таким образом, директива и контроллер не используют одну и ту же область. Используя «=», вы просто привязываете функцию (модель) родительской области к модели дочернего объекта :). Это будет работать, конечно, но я думаю, и было бы более уместным.И это потому, что двухсторонняя привязка к функции, которая никогда не изменится (внутри контроллера или директивы), не очень уместна. Использование & ссылки на функцию - лучший вариант. – AhsanAyaz

Для достижения своей цели, вы должны использовать это выражение в HTML

div(my-youtube,id='aaa',url='KEHxHr-Ih9w',on-change="doEventsOnChange(state,id)")

и в вашей директиве, когда параметры:

console.log('state changed to', state, scope.id, scope.onChange); 
scope.onChange({state: state,id:scope.id});

Смотрите документацию по enter link description here

& или & attr - обеспечивает способ выполнения выражения в контексте родительской области. Если имя attr не указано, предполагается, что имя атрибута совпадает с локальным именем. Представленная и область определения области выделения: {localFn: '& myAttr'}, свойство области изоляции localFn указывает на оболочку функции для выражения count = count + value. Часто желательно передавать данные из изолированной области видимости через выражение в родительскую область. Это можно сделать, передав карту локальных имен переменных и значений в оболочку выражения fn. Например, если выражение является приращением (количеством), мы можем указать значение суммы, вызывая localFn как localFn ({amount: 22}).

Надеюсь, это поможет.

источник

2016-03-15 08:33:26 AhsanAyaz

Передайте функцию директиве, а затем вызовите ее с параметрами

ответ

Смежные вопросы