blocks|key|241690|text|一种方法是使用指令插入自定义模板，其中包括角快速图。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|241691|<div+id="unicTab"+unic-tab-content></div>|code-block|syntax|javascript|241692|app.directive("unicTabContent",function(){
+++return+{
++++++restrict:"A",
++++++template:'{{unicTabContent}}'
+++}
})|241693|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>One way is use a directive for purpose of inserting custom templates that include angular expresssions</p>

<pre><code>&lt;div id="unicTab" unic-tab-content&gt;&lt;/div&gt;
</code></pre>

 <pre class="lang-js prettyprint-override"><code>app.directive("unicTabContent",function(){
   return {
      restrict:"A",
      template:'{{unicTabContent}}'
   }
})
</code></pre>


blocks|key|485570|text|正如Vinod在他的评论中所说，最好的方法就是使用模板。我必须在常规代码之外定义一个模板，例如，我在我的index.html中添加了该代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485571|<script+type="text/ng-template"+id="unic_tab_template.html">
++++<div+ng-switch+on="page">
++++++++<div+ng-switch-when="home"><p>{{home}}</p></div>
++++++++<div+ng-switch-when="form">
++++++++++++<div+ng-controller="formCtrl">
++++++++++++++++<div+ng-repeat="item+in+content">{{item.name}}:{{item.value}}</div>
++++++++++++</div>
++++++++</div>
++++++++<div+ng-switch-default>an+error+accured</div>
++++</div>
</script>|code-block|syntax|javascript|485572|这个模板是有条件的，因此根据$scope.page的值，它在这3个模板之间切换(第三个模板是一个错误处理程序)。为了使用它，我有：|485573|<div+id="unicTab"+ng-controller="unicTabCtrl">
++++<div+ng-include="'unic_tab_template.html'"></div>
</div>|485574|这样，我的页面就会改变，这取决于我的$scope控制器中的unicTabCtrl。|485575|总结一下插入angularsjs模板接缝难以实现的想法($compile接缝是解决方案，但我无法让它工作)。但是，您可以使用条件模板。|485576|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>As Vinod Louis says in his comment, the best way to do that was to use templates. I had to define a template outside of the regular code, for example I added that code inside of my index.html :</p>

<pre><code>&lt;script type="text/ng-template" id="unic_tab_template.html"&gt;
    &lt;div ng-switch on="page"&gt;
        &lt;div ng-switch-when="home"&gt;&lt;p&gt;{{home}}&lt;/p&gt;&lt;/div&gt;
        &lt;div ng-switch-when="form"&gt;
            &lt;div ng-controller="formCtrl"&gt;
                &lt;div ng-repeat="item in content"&gt;{{item.name}}:{{item.value}}&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div ng-switch-default&gt;an error accured&lt;/div&gt;
    &lt;/div&gt;
&lt;/script&gt;
</code></pre>

<p>This template is conditional, so depending on the value of $scope.page, it switches between the 3 templates (the third being an error handler). To use it I had :</p>

<pre><code>&lt;div id="unicTab" ng-controller="unicTabCtrl"&gt;
    &lt;div ng-include="'unic_tab_template.html'"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>That way my page changes depending on the $scope inside of my unicTabCtrl controller.</p>

<p>To conclude the idea of inserting angularsjs template seams to be difficult to realize ($compile seams to be the solution, but I wasn't able to make it work). But instead you may use conditional templating.</p>


blocks|key|485598|text|我试着做同样的事情，然后偶然发现了这个模块。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485599|http://ngmodules.org/modules/ng-html-compile|offset|length|485600|我只是包含了它，然后我就可以使用“ng-html-编译”而不是"ng-bind-html“。|485601|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|18|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

<p>I was trying to do the same thing and came across this module.</p>

<p><a href="http://ngmodules.org/modules/ng-html-compile" rel="nofollow">http://ngmodules.org/modules/ng-html-compile</a></p>

<p>I just included it and then I was able to use "ng-html-compile" instead of "ng-bind-html"</p>


blocks|key|242745|text|此解决方案不使用硬编码模板，您可以编译嵌入到API响应中的角表达式.|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|242746|242747|步骤1.安装此指令：https://github.com/incuna/angular-bind-html-compile|242748|步骤2.在模块中包含指令。|242749|angular.module("app",+["angular-bind-html-compile"])|code-block|syntax|javascript|242750|步骤3.使用模板中的指令：|242751|<div+bind-html-compile="letterTemplate.content"></div>|242752|结果：|242753|控制器对象|242754|+$scope.letter+=+{+user:+{+name:+"John"}}|242755|JSON反应|242756|{+"letterTemplate":[
++++{+content:+"<span>Dear+{{letter.user.name}},</span>"+}
]}|242757|HTML输出=|242758|<div+bind-html-compile="letterTemplate.content">+
+++<span>Dear+John,</span>
</div>|242759|242760|为了便于参考，下面是相关的指令：|242761|(function+()+{
++++'use+strict';

++++var+module+=+angular.module('angular-bind-html-compile',+[]);

++++module.directive('bindHtmlCompile',+['$compile',+function+($compile)+{
++++++++return+{
++++++++++++restrict:+'A',
++++++++++++link:+function+(scope,+element,+attrs)+{
++++++++++++++++scope.$watch(function+()+{
++++++++++++++++++++return+scope.$eval(attrs.bindHtmlCompile);
++++++++++++++++},+function+(value)+{
++++++++++++++++++++element.html(value);
++++++++++++++++++++$compile(element.contents())(scope);
++++++++++++++++});
++++++++++++}
++++++++};
++++}]);
}());|242762|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/incuna/angular-bind-html-compile^0|0|Y|0|0|0|4|A|1F|0|0|0|4|0|0|0|4|0|0|0|3|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]|$1|G|3|H|5|6|7|1O|8|@$9|1P|A|1Q|B|C]]|D|@$9|1R|A|1S|1|1T]]|E|$]]|$1|I|3|J|5|6|7|1U|8|@$9|1V|A|1W|B|C]]|D|@]|E|$]]|$1|K|3|L|5|M|7|1X|8|@]|D|@]|E|$N|O]]|$1|P|3|Q|5|6|7|1Y|8|@$9|1Z|A|20|B|C]]|D|@]|E|$]]|$1|R|3|S|5|M|7|21|8|@]|D|@]|E|$N|O]]|$1|T|3|U|5|6|7|22|8|@$9|23|A|24|B|C]]|D|@]|E|$]]|$1|V|3|W|5|6|7|25|8|@]|D|@]|E|$]]|$1|X|3|Y|5|M|7|26|8|@]|D|@]|E|$N|O]]|$1|Z|3|10|5|6|7|27|8|@]|D|@]|E|$]]|$1|11|3|12|5|M|7|28|8|@]|D|@]|E|$N|O]]|$1|13|3|14|5|6|7|29|8|@]|D|@]|E|$]]|$1|15|3|16|5|M|7|2A|8|@]|D|@]|E|$N|O]]|$1|17|3|-4|5|6|7|2B|8|@]|D|@]|E|$]]|$1|18|3|19|5|6|7|2C|8|@]|D|@]|E|$]]|$1|1A|3|1B|5|M|7|2D|8|@]|D|@]|E|$N|O]]|$1|1C|3|-4|5|6|7|2E|8|@]|D|@]|E|$]]]|1D|$1E|$5|1F|1G|1H|E|$1I|1J]]]]

<p><strong>This solution doesn't use hardcoded templates, and you can compile Angular expressions embedded within an API response.</strong></p>

<hr>

<p><strong>Step 1.</strong> 
Install this directive: <a href="https://github.com/incuna/angular-bind-html-compile">https://github.com/incuna/angular-bind-html-compile</a></p>

<p><strong>Step 2.</strong> Include the directive in the module.</p>

<pre><code>angular.module("app", ["angular-bind-html-compile"])
</code></pre>

<p><strong>Step 3.</strong> Use the directive in the template:</p>

<pre><code>&lt;div bind-html-compile="letterTemplate.content"&gt;&lt;/div&gt;
</code></pre>

<p><strong>Result:</strong></p>

<p>Controller Object</p>

<pre><code> $scope.letter = { user: { name: "John"}}
</code></pre>

<p>JSON Response</p>

<pre><code>{ "letterTemplate":[
    { content: "&lt;span&gt;Dear {{letter.user.name}},&lt;/span&gt;" }
]}
</code></pre>

<p>HTML Output =</p>

<pre><code>&lt;div bind-html-compile="letterTemplate.content"&gt; 
   &lt;span&gt;Dear John,&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<hr>

<p>For reference sake, here's the relevant directive:</p>

<pre><code>(function () {
    'use strict';

    var module = angular.module('angular-bind-html-compile', []);

    module.directive('bindHtmlCompile', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function () {
                    return scope.$eval(attrs.bindHtmlCompile);
                }, function (value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                });
            }
        };
    }]);
}());
</code></pre>


blocks|key|241781|text|我在不使用模板的情况下解决当前应用程序中类似问题的解决方案(不优雅，但有效)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|241782|directive('ngBindHtmlCompile',+['$compile',+function+($compile)+{
++++return+{
++++++++restrict:+'A',
++++++++compile:+function+compile(tElement,+tAttributes,+transcludeFn)+{
++++++++++++return+function+postLink(scope,+element,+attributes)+{
++++++++++++++++scope.$watch(function()+{
++++++++++++++++++++return+scope.$eval(attributes.ngBindHtml);
++++++++++++++++},+function(newValue,+oldValue)+{
++++++++++++++++++++$compile(element.children())(scope);
++++++++++++++++});
++++++++++++};
++++++++}
++++};
}]);|code-block|syntax|javascript|241783|它需要同一元素上的ngBindHtml，并在其随ngBindHtml更改后编译元素内容。|offset|length|style|CODE|241784|<div+id="unicTab"+ng-bind-html="unicTabContent"+ng-bind-html-compile></div>|241785|ng-html-compile看起来很相似，但乍一看，它不会在模板内容发生变化时重新计算。但我还没试过。|241786|entityMap^0|0|0|9|A|O|A|0|0|0|F|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]|$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@$I|11|J|12|K|L]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|R|$]]

<p>My solution to similar problem in my current app without using template (not elegant, but working):</p>

<pre><code>directive('ngBindHtmlCompile', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        compile: function compile(tElement, tAttributes, transcludeFn) {
            return function postLink(scope, element, attributes) {
                scope.$watch(function() {
                    return scope.$eval(attributes.ngBindHtml);
                }, function(newValue, oldValue) {
                    $compile(element.children())(scope);
                });
            };
        }
    };
}]);
</code></pre>

<p>It requires <code>ngBindHtml</code> on the same element and compiles the element content after it changes with <code>ngBindHtml</code>.</p>

<pre><code>&lt;div id="unicTab" ng-bind-html="unicTabContent" ng-bind-html-compile&gt;&lt;/div&gt;
</code></pre>

<p><code>ng-html-compile</code> looks similar but at first glance it won't be recalculated when the template content is changing. But I haven't tried it.</p>


blocks|key|242793|text|下面的代码要简单得多，使用角的内置$interpolate和$sce对象。首先，在执行指令中所需的任何自定义操作时，将$interpolate和$sce角对象注入到指令中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|242794|amqApp.directive('myDir',+['$interpolate',+'$sce',+function+($interpolate,$sce+)+{...}|code-block|syntax|javascript|242795|然后创建导入的html表达式中的所有作用域变量.|242796|$scope.custom+=+'Hello+World';|242797|接下来，使用$interpolate处理您的自定义HTML及其expressions...then，确保在绑定之前使用$sce对象信任它为HTML+.|242798|var+html+=+$interpolate('<b>{{custom}}</b>')($scope);++++
$scope.data+=+$sce.trustAsHtml(html);|242799|最后，在您的视图中，只需确保在视图显示中使用带有"ng-bind“或”ng-bind“的元素。我发现如果你不像这样在你的$sce模板中绑定它的话，它就不会以HTML的形式显示出来.|242800|<span+ng-bind-html="data"></span>|242801|你应该用粗体..。|242802|Hello+World|offset|length|style|BOLD|242803|我使用这个技巧从web.config导入具有自定义角{表达式}的文本/HTML。|242804|entityMap^0|0|0|0|0|0|0|0|0|0|0|B|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1D|8|@$W|1E|X|1F|Y|Z]]|9|@]|A|$]]|$1|10|3|11|5|6|7|1G|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

<p>The code below is much simpler using Angular's built-in $interpolate and $sce objects. First inject the $interpolate and $sce Angular objects into your directive as you do anything custom you need in your directive.</p>

<pre><code>amqApp.directive('myDir', ['$interpolate', '$sce', function ($interpolate,$sce ) {...}
</code></pre>

<p>Then create all your scoped variables found in your imported html expressions...</p>

<pre><code>$scope.custom = 'Hello World';
</code></pre>

<p>Next use $interpolate to process your custom HTML and its expressions...then make sure you use the $sce object to trust it as HTML before binding...</p>

<pre><code>var html = $interpolate('&lt;b&gt;{{custom}}&lt;/b&gt;')($scope);    
$scope.data = $sce.trustAsHtml(html);
</code></pre>

<p>Finally, in your view, just make sure use an element with the "ng-bind" or "ng-bind-html" on it in your view display. I found the $sce piece wont display the HTML as HTML (sees it as text) if you don't bind it in your html template like this...</p>

<pre><code>&lt;span ng-bind-html="data"&gt;&lt;/span&gt;
</code></pre>

<p>You should see in bold...</p>

<p><strong>Hello World</strong></p>

<p>I used this trick to import in text/HTML with custom angular {{expressions}} from a web.config.</p>


blocks|key|485717|text|基于内置模板的@clement的简化解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485718|主计长：|485719|app.controller('TestCtrl',+[
++++'$scope',
++++'$templateCache',
++++function+($scope,+$templateCache)+{
++++++++$templateCache.put('test.html',+'2+%2B+2+=+{{+2+%2B+2+}}');
++++}
]);|code-block|syntax|javascript|485720|查看：|485721|<div+ng-include="'test.html'"></div>|485722|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>A lot simplified solution of @clement-roblot based on built-in templates.</p>

<p>Controller:</p>

<pre><code>app.controller('TestCtrl', [
    '$scope',
    '$templateCache',
    function ($scope, $templateCache) {
        $templateCache.put('test.html', '2 + 2 = {{ 2 + 2 }}');
    }
]);
</code></pre>

<p>View:</p>

<pre><code>&lt;div ng-include="'test.html'"&gt;&lt;/div&gt;
</code></pre>


<p>I am working with angularjs 1.2.0-rc.3. I'd like to include html code into a template dynamically. For that I use in the controller :</p>

<pre><code>html = "&lt;div&gt;hello&lt;/div&gt;";
$scope.unicTabContent = $sce.trustAsHtml(html);
</code></pre>

<p>In the template I got :</p>

<pre><code>&lt;div id="unicTab" ng-bind-html="unicTabContent"&gt;&lt;/div&gt;
</code></pre>

<p>It works fine for regular html code. But when I try to put angular template it is not interpreted, it is just included in the page. For example I'd like to include :</p>

<pre><code>&lt;div ng-controller="formCtrl"&gt;
    &lt;div ng-repeat="item in content" ng-init="init()"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Thanks a lot</p>


How to make ng-bind-html compile angularjs code

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用angularjs 1.2.0-rc.3。我想动态地将html代码包含到模板中。为此，我在控制器中使用：html = "<div>hello</div>";$scope.unicTabContent = $sce.trustAsHtml(html);在我得到的模板中：<div id="unicTab" ng-...

问如何使ng-bind-html编译angularjs代码
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使ng-bind-html编译angularjs代码EN