javascript - Angular |指令未传回正确的值

Question

您好，我创建了一个指令，但它没有传回正确的消息。

该指令用于将工具提示传递回 html 页面

这就是 html 的样子

<info-text info-msg="Adding another applicant might help you to get approved."></info-text>

下面是指令

(function(){

angular.module('mainApp').directive('infoText', [function () {
    return {
        scope: { infoMessage: '&infoMsg' },
        restrict: 'E',
        replace: true,
        template: '<p class="info-text"><i class="fa fa-info-circle"></i> {{infoText}}</p>',
        link: function(scope, elem, attrs) {
            $(elem).prev().hover(function(){
                $(elem).addClass('info-hover');
            }, function(){
                $(elem).removeClass('info-hover');
            });
        }
    };
}]);

}());

我在页面上呈现的消息如下(它确实发送字形):

{{infoText}}

任何想法，

谢谢。基兰。

Answer 1

您不应该将 & 用于此类绑定(bind)，基本上它用于表达式绑定(bind)。我认为绑定(bind)(@)的一种方式对于您正在做的事情是有效的。

您还应该将指令模板 {{infoText}} 更改为 {{infoMessage}}

标记

<info-text 
   info-msg="{{'Adding another applicant might help you to get approved.'}}"></info-text>

指令

angular.module('mainApp').directive('infoText', [function () {
    return {
        scope: { infoMessage: '@infoMsg' },
        restrict: 'E',
        replace: true,
        template: '<p class="info-text"><i class="fa fa-info-circle"></i> {{infoMessage}}</p>',
        link: function(scope, elem, attrs) {
            $(elem).prev().hover(function(){
                $(elem).addClass('info-hover');
            }, function(){
                $(elem).removeClass('info-hover');
            });
        }
    };
}]);

为了使 html 更加清晰易读，您可以将该字符串放入某个作用域变量中，并在 info-msg 属性中传递该作用域变量