使用指令/$compile 将 HTML 设置为属性

Posted 2023-03-05

【中文标题】使用指令/$compile 将 HTML 设置为属性

【英文标题】：Setting HTML as attributes with directive/$compile

【发布时间】：2014-02-26 08:20:24

【问题描述】：

我的模块的控制器有一个属性作为我在其中组装 html 的字符串。

在指令中，我尝试将 HTML 字符串分配给工具提示的属性，即 “工具提示-html-不安全”。

我可以将整个元素分配给这个工具提示属性。如何访问父作用域的属性？

请查看我的 plunkr 以获取给出的代码： http://plnkr.co/edit/rTq8zrKdc3qABrc9Tde6?p=catalogue

【问题讨论】：

你想具体访问什么？

我正在尝试访问控制器中名为 contentHTML 的父范围属性，因为它在那里组装。从链接功能（参见 plunkr）中，如果我使用 element.html(scope[attrs.value])); 没有区别。或 element.html();因为所有标签都被返回并设置为属性。

您打算将指令放在 index.html 中的控制器中吗？

指令和控制器是同一个模块的一部分（请看我在plunkr中的代码）

【参考方案1】：

两件事：

您需要更新 $scope.contentHTML 的值（仅设置 var 值不会更新 $scope 值）。如果您只想从指令中读取该值，可以在链接函数中使用scope.contentHTML 访问它。

如果您希望能够从指令中设置父作用域的 contentHTML 属性，您可以在指令中使用 scope 属性并将值设置为“=”。然后您可以在链接功能中从scope 访问它。例如：

app.directive("tooltipView", function($compile)    
    return 
        restrict: "AE", 
        scope: 
            tooltipView: "="
        ,
        link: function(scope, element, attrs) 
             console.log(scope.tooltipView);
        
    ;
);

如果您计划在指令中使用 "=" 符号值作为范围（上面的第 2 号），您还需要告诉指令要在 HTML 中映射到哪个范围值。所以： <p tooltip-view="contentHTML">Hello name!</p> 会将链接函数中的 scope.tooltipView 映射到控制器中的 $scope.contentHTML。

查看基于您的 plunkr：http://plnkr.co/edit/HskBFNRW8mC8QmVWr3hP

【讨论】：

我应该如何以及在哪里更新 $scope.contentHTML 的值？那是因为链接功能无法识别它吗？

我想将 scope.contentHTML 设置为属性。在链接函数中的任何位置使用 scope.contentHTML 都会让我进入 ***。

如果您使用上面第 2 条中描述的内容，您可以使用 scope.tooltipView = '' 从指令中更新 $scope.contentHTML 的值。

我不会覆盖父范围/控制器的旧值吗？

作为作者，您应该会在问题左侧的向上/向下箭头下方看到一个复选标记。检查一下，应该这样做。 :)

【参考方案2】：

要从当前范围访问父范围，您可以这样做：

scope.$parent.someValue

【讨论】：

所以我可以存储旧值，然后在指令中设置一个新值？那么我猜我应该在指令中有一个自己的范围？