javascript - AngularJS 自定义指令传递函数未定义

Question

所以我创建了一个指令，当点击时应该表现得像 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>

标签： javascriptangularjsangularjs-directiveundefinedcustom-directive