Question

我已经定义了一个自定义点击指令，如下所示：

＆＃13;

(function() {
    
    'use strict';
    angular.module('myApp.core')
        .directive('customClick', customClick);

        customClick.$inject = ['$rootScope'];

        function customClick() {
            return {
                restrict: 'A',
                /*scope: {
                    customClick: '&'  
                },*/
                link: function(scope, element, attrs){
                   $(element).on('click', function(e) {
                        scope.$apply(function() {
                            console.log("Hello..customClick..");
                            scope.customClick();
                        });
                    });
                }
          };
        }
})();

＆＃13;

我在此收到以下错误;

＆＃13;

Error logged by WDPR Angular Error handler service {xx.."stacktrace":"TypeError: a.customClick is not a function","cause":"unknown cause"}(anonymous function)bowerComponents.js:5745

＆＃13;

我该如何解决这个问题？如果我添加＆＃39;＆amp;＆＃39;我要求隔离范围。那么如何解决呢？

如果我删除 - scope.customClick（）;，它不会在第二个html上显示任何用于自定义单击的内容，它只对1个html及其控制器产生影响。我想在多个控制器+ html中使用它。

Answer 1

customClick是指令本身的一个函数。它不是范围的功能。这就是错误发生的原因。

link用于操作元素上的dom / add事件处理程序，您使用element.bind('click', function() {

正确完成了这些处理程序

每当发生点击时，会自动调用绑定到自动点击的功能。不需要观察和调用声明。

您的链接可以是

link: function(scope, element){
        element.bind('click', function() {
                console.log("Hello..customClick..");
        });
    }

由于您在命名指令时使用了camel case，因此请谨慎使用模板。

您可以将其用作<p custom-click>hi</p>

Answer 2

我建议你避免在角度应用程序中使用jQuery。试试以下

angular.module('newEngagementUI.core')
        .directive('customClick', customClick);

    customClick.$inject = ['$rootScope'];

    function customClick() {
        return {
            restrict: 'A',
            scope: {
                customClick: '&'  
            },
            link: function(scope, element, attrs){
               element.bind('click', function () {
                   scope.customClick();
               })
            }
      };
    }

在你的模板中：

<div custom-click="clickFunction"></div>

你的模板控制器应该是：

angular.module('myApp', []).controller(['$scope', function ($scope) {

    $scope.clickFunction = function () {
        alert('function passed');
    }

}])

在这里工作小提琴：https://jsfiddle.net/xSaber/sbqavcnb/1/

Typeerror - 不是angular指令中的函数

2 个答案: