1

我有这种情况，我正在通过脚本动态加载部分 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/

4

3 回答 3

2

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

<body ng-app>
    main content page
    <br />
    <!-- widget1 -->
    <b>Widget1</b>
    <div ng-include="'/widgetsfolder/widget1.htm'">
    </div>
</body>
于 2013-07-29T18:57:31.577 回答
0

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

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

我相信这不会以这种方式工作。

于 2013-07-29T18:52:42.220 回答
0

您可以使用 angulars ngINclude 来获取外部文档，但我不建议这样做，它可能有问题。您可以使用 $http 或 $resource 获取部分，这将获取数据并编译内部的角度指令。

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

于 2013-07-29T18:58:36.143 回答