当前位置: 首页 > 面试题库 >

$ sce.trustAsHtml中的呈现指令

濮阳景天
2023-03-14
问题内容

我在此处加入了一个Plunker:http
://plnkr.co/edit/4vqV8toHo0vNjtfICtzI?p=preview

我正在尝试向DOM添加一个按钮,单击该按钮应执行绑定到它的功能。在这种情况下,它应该警告“测试”。这是代码。

控制者

app.controller('MainCtrl', function($scope, $sce) {
        $scope.trustedHtml = $sce.trustAsHtml('<button ng-click="testAlert()">Submit</button>');

        $scope.testAlert = function () {
            alert('testing')
        };
});

的HTML

<body ng-controller="MainCtrl">
    <div ng-bind-html="trustedHtml"></div>
</body>

问题答案:

$sce.trustAsHtml并且ng-bind-html不打算使用指令构建HTML。此技术将不起作用。

这是因为angular的工作方式是先编译然后链接。有关详细说明,请参见概念概述。

简而言之,当您链接您的中定义的HTML时trustAsHtml,对于角度而言,编译(并因此理解)该ng-click指令为时已晚。

为了动态添加HTML,您应该查看$compile服务(和/或指令)。
文件在这里。



 类似资料:
  • 以下是在sun.reflect.nativeMethodAccessorImpl.Invoke0(本机方法)在sun.reflect.nativeMethodAccessorImpl.Invoke(未知源)在sun.reflect.NativeMethodAccessorImpl.Invoke(未知源)在java.lang.Reflect.Method.Invoke(未知源)在com.codena

  • 如何使用JSX进行条件渲染? 例如,我这里有div,如果props的值为null,我想呈现文本“不知道”,否则如果props不等于null,则呈现props。 例如: 我试过了,但没有成功。知道我做错了什么吗? 提前感谢!

  • 在服务器日志中可以找到如下所示的多个错误 com.sun.faces.lifecycle.RenderResponsePhase.Execute处的java.lang.NullPointerException(RenderResponsePhase.java:95) 如果我检查了JSF的源代码,问题就在这行源代码上 ViewDeclarationLanguage vdl=VH.GetViewDec

  • 我在Android Studio中创建一个项目时遇到了一个问题。(版本1.5.1) 我一步一步地描述我的行动: null 会有什么问题?

  • 问题内容: 我正在使用Angularjs开发应用程序,并在页面中添加使用。我想在上面动态添加的内容中调用一个函数。我的html和脚本如下。 的HTML Java脚本 jsfiddle 点击这里查看 问题答案: 这有点棘手,因为将只插入普通的旧html而不用麻烦对其进行编译(因此html中的任何指令都不会被angular处理。 诀窍是在模板更改时找到一种编译方法。例如,您可以创建一个执行此操作的指令