Question

我有这个模板

<span highlight>{{player.Name}}</span>

和这个指令

wcApp.directive('highlight', function() {
    return {
        restrict : 'A',
        link : function (scope, element, attrs) {
            var nameStr = element.text();

            nameStr = $.map(nameStr,function(letter){
                return letter == ' ' ? '&#160;' : letter;
            });

            element.html('<span>' + nameStr.join('</span><span>') + '</span>');
        }
    };
});

但它不起作用。我想抓住跨度中的文本，分解字母并将每个字符包裹在一个范围内。

我做错了什么？

Answer 1

试

.directive('highlight', function() {
    return {
        restrict : 'A',
        template: '<span ng-repeat="l in letters">{{ l.letter }}</span>',
        link : function (scope, element, attrs) {
            var nameStr = attrs.highlight;
            nameStr = nameStr.split("");

            var map = [];
            var i=0, len=nameStr.length;
            for (; i<len; i++) {
                map.push({letter: nameStr[i] = nameStr[i].replace(" ", "&#160;")});
            }

            scope.letters = map;
        }
    };
});

Answer 2

问题是绑定，元素尚未编译，有不同的方法来解决这个问题（在编译之后优先考虑你的指令，绑定并用compileProvider自己编译它）

wcApp.directive('highlight', function() {
    return {
        restrict : 'A',
        link : function (scope, element, attrs) {
            var nameStr = element.text();

            alert(nameStr); // {{player.Name}}

            nameStr = $.map(nameStr,function(letter){
                return letter == ' ' ? '&#160;' : letter;
            });

            element.html('<span>' + nameStr.join('</span><span>') + '</span>');
        }
    };
});

替代解决方案：

<span highlight="player.name"></span>

...和js

wcApp.directive('highlight', function() {
    return {
        restrict : 'A',
        scope: {highlight: "="},
        link : function (scope, element, attrs) {
            var nameStr = scope.highlight;

            // alert(nameStr); // not {{player.Name}}

            nameStr = $.map(nameStr,function(letter){
                return letter == ' ' ? '&#160;' : letter;
            });

            element.html('<span>' + nameStr.join('</span><span>') + '</span>');
        }
    };
});

simpulton写了一篇非常好的博客文章，值得一读： http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/

如何编写Angular指令将文本转换为标记

2 个答案: