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

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

您还应该将指令模板 {{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 属性

Angular |指令没有传回正确的值

Angular | Directive not passing correct value back

javascript

directive

angularjs