如何在angular指令中绑定事件

I am new to angular and having problem to bind an click event to my directive.

我是角色新手,将click事件绑定到我的指令时遇到问题。

I have an ul-list with a links in each li. When I click a link I want to do a service call that adds or removes the clicked items ID and refresh the list.

我有一个ul列表,每个li都有一个链接。当我单击链接时,我想要进行服务调用,添加或删除单击的项ID并刷新列表。

When refreshed, each list items will show if an id is "marked" or not.

刷新时,每个列表项都会显示id是否“已标记”。

Can anyone help me?

谁能帮我?

html view:

<a href="#" class="showbooklist" qtip="12568">
    <img src="image.png">
</a>

Directive:

listControllers.directive('qtip', ['boklistorservice', function (boklistorservice) {
    return {
        restrict: 'A',                
        controller: ["$scope", "$attrs","$element", "boklistorservice", function ($scope, $attrs,$element, boklistorservice) {                              
            boklistorservice.getdata().then(function (data) { //serice call to gett data
                $scope.booklist = data;
                $element.qtip({ //use the jquery.tip2.js tooltip plugin
                    content: {
                        text: getcurrentbooklist($attrs.qtip, data.barnenskrypin.booklistor)
                    },
                    position: {
                        my: 'bottom center',
                        at: 'top center'
                    },
                    hide: {
                        fixed: true,
                        delay: 300
                    }
                });
            })           
        }]
    };
}]);

//function returns a string. An ul to show in the toolbox 
var getcurrentbooklist = function (bookid, arr) {
    var rettext = "<ul>";
    $.each(arr, function (item, val) {
        item;
        var inlist = false;
        $.each(val.bookitems, function (i, v) {
            if (v.bookid == bookid) {
                inlist = true;
                return false;
            } else {
                inlist = false;
            }
        });
        if (inlist) {
            rettext += "<li><a (NEED A CLICK EVENT HERE and pass bookid) > " + val.booklistnamn + "-- MARK </a></li>";
        } else {
            rettext += "<li><a (NEED A CLICK EVENT HERE and pass bookid) >" + val.booklistnamn + "--</a></li>";
        }
    });
    rettext += "</ul>";
    return rettext;
};

2 个解决方案

#1

Use the link function of a directive (code untested):

使用指令的链接功能(代码未经测试):

listControllers.directive('qtip', ['boklistorservice', function (boklistorservice) {
    return {
        restrict: 'A', 
        link: function ($scope, element, attrs) {
            element.bind('click', function () {
                //Do your work here
            });
        },             
        controller: ["$scope", "$attrs","$element", "boklistorservice", function ($scope, $attrs,$element, boklistorservice) {                              
            boklistorservice.getdata().then(function (data) { //serice call to gett data
                $scope.booklist = data;
                $element.qtip({ //use the jquery.tip2.js tooltip plugin
                    content: {
                        text: getcurrentbooklist($attrs.qtip, data.barnenskrypin.booklistor)
                    },
                    position: {
                        my: 'bottom center',
                        at: 'top center'
                    },
                    hide: {
                        fixed: true,
                        delay: 300
                    }
                });
            })           
        }]
    };
}]);

#2

jquery.tip2 adds the html to body so you need to find the content in body and add the click event

jquery.tip2将html添加到body中,因此您需要在body中查找内容并添加click事件

$element.qtip();
angular.element(document.body).find('[qtip container id or class or element] a').bind('click', function () {
    //Do your work here
});

#1