在其模板中使用 Angular Directive 属性 [英] Use Angular Directive attributes in its template

问题描述

如何在指令中使用属性的值?我的元素看起来像这样:

我想在指令的模板中使用它，如下所示:

mainApp.directive('myTooltip',功能() {//允许的事件监听器var allowedListeners = ["点击"];返回 {限制:'A'，模板:'<div class="tooltip-title">...</div>'+'<div class="tooltip-content">'+'...</div>',链接:函数(范围，榆树，属性){if(allowedListeners.indexOf(attrs.myTooltip) != -1){elm.bind(attrs.myTooltip, function(){...});}}};});

三个点的位置应该有代码，但我不知道如何将 attrs 对象(attrs.tooltipTitle 等)的内容放入该模板中.

解决方案

您可以像这样拉出属性并将它们放入指令的范围内:

angular.module('myApp', []).指令('myTooltip'，函数($log){//允许的事件监听器var allowedListeners = ["点击"];返回 {限制:'A'，模板:'<div class="tooltip-title">{{tooltipTitle}}</div>'+'<div class="tooltip-content">'+'{{tooltipContent}}</div>',范围: {tooltipTitle: '@tooltipTitle',tooltipContent: '@tooltipContent'},链接:功能(范围，榆树，属性){如果(allowedListeners.indexOf(attrs.myTooltip)！= -1){elm.bind(attrs.myTooltip, 函数 () {$log.info('点击');});}}};});

这是小提琴:http://jsfiddle.net/moderndegree/f3JL3/

How can I use the value of an attribute in a directive? My element looks like this:

<div class="tooltip-icon" 
  data-my-tooltip="click" 
  data-tooltip-title="foo" 
  data-tooltip-content="test content"></div>

I would like to use that in the template of my directive, which looks like this:

mainApp.directive('myTooltip',
    function() {

        // allowed event listeners
        var allowedListeners = ["click"];

        return {
            restrict: 'A',
            template:   '<div class="tooltip-title">...</div>' +
                        '<div class="tooltip-content">' +
                        '...</div>',
            link: function(scope, elm, attrs) {
                if(allowedListeners.indexOf(attrs.myTooltip) != -1){
                    elm.bind(attrs.myTooltip, function(){
                        ...
                    });
                }

            }
        };
    }
);

Where the triple dots are there should be code, but I cannot figure out how to get the contents of the attrs object (attrs.tooltipTitle, etc) into that template.

解决方案

You can pull the attributes out and place them into the scope of the directive like this:

angular.module('myApp', []).
directive('myTooltip', function ($log) {
    // allowed event listeners
    var allowedListeners = ["click"];
    return {
        restrict: 'A',
        template:   '<div class="tooltip-title">{{tooltipTitle}}</div>' +
                    '<div class="tooltip-content">' +
                    '{{tooltipContent}}</div>',
        scope: {
            tooltipTitle: '@tooltipTitle',
            tooltipContent: '@tooltipContent'
        },
        link: function (scope, elm, attrs) {
            if (allowedListeners.indexOf(attrs.myTooltip) != -1) {
                elm.bind(attrs.myTooltip, function () {
                    $log.info('clicked');
                });
            }

        }
    };
});

Here is fiddle: http://jsfiddle.net/moderndegree/f3JL3/

这篇关于在其模板中使用 Angular Directive 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！