Question

我已使用jQuery .replaceWith()插入新的DOM内容。所有内容都将被替换，但title的值不绑定。

我尝试了以下代码，但工具提示仅显示{{descriptions.title}}而不是应该显示的文本。

这是我的代码：

$scope.showDescription = function(descriptions) {
            $("#description").find('span#header').replaceWith("<span id='header' class='mleft' title='{{descriptions.title}}'>" + descriptions.name + " - " + descriptions.title + "</span>");
}

我希望工具提示显示descriptions.title值，而不只是显示{{descriptions.title}}

Answer 1

您只需添加字符串{{description.title}}作为标题，您需要添加变量本身：

$scope.showDescription = function(descriptions) {
            $("#description").find('span#header').replaceWith("<span id='header' class='mleft' title='" + description.title + "'>" + descriptions.name + " - " + descriptions.title + "</span>");
}

编辑：我认为更好的方法是不在此处使用replaceWith，而只是更改所需的属性：

    $scope.showDescription = function(descriptions) {
                $("#description").find('span#header').attr("title",description.title).html(descriptions.name + descriptions.title);
}

这样，您可以更改html本身，而无需改编JS。

Answer 2

您需要将其串联起来-这不是Angular变量，只是普通的JS：

$scope.showDescription = function(descriptions) {
    $("#description").find('span#header').replaceWith("<span id='header' class='mleft' title='" + descriptions.title + "'>" + descriptions.name + " - " + descriptions.title + "</span>");
}

或者仅使用模板字符串（ES6）：

$scope.showDescription = function(descriptions) {
    $("#description").find('span#header').replaceWith(`<span id='header' class='mleft' title='${descriptions.title}'>${descriptions.name} - ${descriptions.title}</span>`);
}

Answer 3

您可以尝试一下。工作正常

$("#description").find('span#header')
                 .replaceWith("<span id='header' class='mleft' title="+ descriptions.title+">" + descriptions.name + " - " + descriptions.title + "</span>");

无法使用replaceWith（）将值绑定到工具提示

3 个答案: