当我使用 ng-bind-html 动态添加 HTML 时，如何启动此 HTML 的编译 [英] When I dynamically add HTML using ng-bind-html how can I initiate a compile for this HTML

问题描述

我的 index.html 包含以下元素

...<div class="col-md-6" ng-bind-html='module.docs.html'></div>...

module.docs.html 属性返回 HTML 之类的

<label class="checkbox"><input type="checkbox" ng-model="oneAtATime">一次只打开一个<accordion close-others="oneAtATime"><accordion-group Heading="静态标题，初始展开" is-open="true">此内容直接在模板中.</accordion-group><accordion-group Heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</accordion-group><accordion-group Heading="动态正文内容"><p>手风琴组的主体生长以适应内容</p><button class="btn btn-default btn-sm" ng-click="addItem()">添加项目</button><div ng-repeat="item in items">{{item}}</div></accordion-group><accordion-group is-open="isopen"><手风琴标题>我也可以有标记！<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i></accordion-heading>这只是一些说明花哨标题的内容.</accordion-group></手风琴>

插入了 HTML，但 Angular.dart 似乎没有对它做任何事情(accordion-demo-ctrl 未实例化)

解决方案

使用 ng-include 指令有效.我更改了代码，以便提供 HTML 片段的 URI 而不是源本身(无论如何都是从服务器获取的).

另请参阅我对如何在 Angular.Dart 中以编程方式添加组件?的替代解决方案

My index.html contains the following element

...
<div class="col-md-6" ng-bind-html='module.docs.html'></div>
...

The module.docs.html property returns HTML like

<div ng-controller="accordion-demo-ctrl">
  <label class="checkbox">
    <input type="checkbox" ng-model="oneAtATime">
    Open only one at a time
  </label>

  <accordion close-others="oneAtATime">
    <accordion-group heading="Static Header, initially expanded" is-open="true">
      This content is straight in the template.
    </accordion-group>
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </accordion-group>
    <accordion-group heading="Dynamic Body Content">
      <p>The body of the accordion group grows to fit the contents</p>
        <button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
        <div ng-repeat="item in items">{{item}}</div>
    </accordion-group>
    <accordion-group is-open="isopen">
        <accordion-heading>
            I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
        </accordion-heading>
        This is just some content to illustrate fancy headings.
    </accordion-group>
  </accordion>
</div>

The HTML is inserted but Angular.dart seems not to do anything with it (accordion-demo-ctrl is not instantiated)

解决方案

Using the ng-include directive worked. I changed my code so that I provided the URI of the HTML fragment instead of the source itself (fetched from the server anyway).

see also my answer to How to add a component programatically in Angular.Dart? for an alternative solution

这篇关于当我使用 ng-bind-html 动态添加 HTML 时，如何启动此 HTML 的编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！