Пользовательская директива AngularJS передала функцию undefined - PullRequest
Новая
       22

Пользовательская директива AngularJS передала функцию undefined

0 голосов
/ 14 октября 2019

Итак, я создал директиву, которая при нажатии должна вести себя так же, как ng-click`, то есть любая функция, переданная через html, должна работать. Когда я регистрирую атрибуты и т.д., он показывает функцию, однако, когда я нажимаю, ничего не происходит, и функция в журнале показывает неопределенную

Директиву: 

(function() {
    'use strict';

    angular
        .module('suggestBox')
        .directive('sbClickItem', [ function() {
            return {
                restrict: 'E',
                scope: {
                    callback: '&'
                },
                link: function ($scope, $element, $attrs){

                  $element.on('click', function(){
                    console.log('clicked');
                    console.log($scope.callback());
                    $scope.callback();
                  })


                }

            }
        }])
})();

, щелчок регистрируется, поскольку он выводит журналы. , но когда вы регистрируете $scope.callback() его значение не определено, а при входе в систему без () он показывает ƒ (b){return s(a,b)}

HTML: 

<sb-click-item callback="vm.onFunc1()"  class="sbClickItem"> {{s.name}} </sb-click-item>

JS: 

(function(){
    'use strict';

    angular
        .module('demo', ['suggestBox'])
        .controller('demo', ['$scope', '$element', '$timeout', function($scope, $element, $timeout){
            var vm = this;

            vm.onChange1 = function(){
                console.log('Change');
            }
            vm.onFunc1 = function(){
              alert('name');
            }
        }]);
})();

Любая помощь будет принята с благодарностью.

РЕДАКТИРОВАТЬ: Он работает, когда он сам по себе: 

<sb-click-item callback="vm.onFunc1()"  class="sbClickItem"> {{s.name}} </sb-click-item>

Но это не так, когда его вложения, как это: 

<div class="title">Example 1: Check selected items behaviour.</div>
        <div suggest-box sb-list="vm.names" sb-model="vm.model1" sb-key-fields="name" sb-search-fields="name" class="suggest-box"  sb-on-selection-change="vm.onChange1()" >
            <div class="select">
                <div class="input">
                    <div sb-selection-item class="selection-item"><sb-click-item callback="vm.onFunc1()"  class="sbClickItem"> {{s.name}} </sb-click-item>&nbsp;<span sb-remove-item-from-selection class="rem-btn"><i class="fa fa-times"></i></span></div>
                    <input sb-trigger-area sb-type-ahead tabindex="1">
                </div>

                <button sb-trigger-area><i class="fa fa-chevron-down"></i></button>
            </div>

            <ul class="dropdown">
                <li sb-dropdown-item class="item">{{i.name}} ({{i.email}})</li>
            </ul>
        </div>
...