Question

我有这个场景，我通过脚本动态加载HTML（有AngularJS指令）的一部分，我看到AngularJS没有被激活。

这是我正在看的例子。无论如何，我可以告诉AngularJS开始绑定文件吗？通过iframe加载包含此widget1内容的aspx页面似乎有效，但我试图避免使用iframe并使用客户端脚本。感谢任何帮助。

<body ng-app>
main content page
<br />
<!-- widget1 -->
<b>Widget1</b>
<div id="widget1">
    <!-- load below div via jquery/or any method from a remote html file-->
    <script type="text/javascript">
        $("div#widget1").load("/widgetsfolder/widget1.htm");
    </script>
</div>

widget.htm文件的内容低于内容。

   <div ng-controller="TodoCtrl">
        Total todo items: {{getTotalItems()}}
        <ul class="unstyled">
            <li ng-repeat="todo in todos">
                <input type="checkbox" ng-model="todo.done" />
                <span class="done-{{todo.done}}">{{todo.text}} </span></li>
        </ul>
    </div>

我的控制器代码如下。

`function TodoCtrl($scope) {
    $scope.totalItems = 4;
    debugger;
    $scope.todos = [{
        text: 'learn angularjs',
        done: false
    }, {
        text: 'implement angularjs',
        done: false
    }, {
        text: 'something else',
        done: false
    }, ];

$scope.getTotalItems = function () {
    return $scope.todos.length;
}

}`

此处的示例代码 http://jsfiddle.net/devs/RGfp4/

Answer 1

Apero的回答描述了正在发生的事情。我相信你会想要使用ng-include。你的HTML看起来像这样：

<body ng-app>
    main content page
    <br />
    <!-- widget1 -->
    <b>Widget1</b>
    <div ng-include="'/widgetsfolder/widget1.htm'">
    </div>
</body>

Answer 2

AngularJS评估范围并在加载页面后呈现页面。

在这里，你的js脚本加载小部件html但是在Angular已经编译了范围等之后。

我相信这不会这样。

Answer 3

您可以使用angularscinc来获取外部文档，但我不建议它，它可能是错误的。您可以使用$ http或$ resource获取部分，这将获取数据并编译内部的angular指令。

如果要使用其他方法加载脚本，可以将数据作为字符串存储在控制器中，并使用$ compile指令执行其中的角度代码。

从脚本加载HTML时，AngularJS未被激活

3 个答案: