使用 Angular JS 将 HTML 附加到 div

Question

我目前正在使用 AngularJS 构建 Umbraco 仪表板扩展，想知道是否有一种方法可以将 HTML 附加到我页面上的 div。

我的想法是，我想创建一种历史窗格，每次用户单击按钮触发对我们的 Web 服务的 Web 请求时，它都会更新。 Web 请求然后 returns 每个已在 Umbraco 中更新的页面以及每个页面的 link。

到目前为止我有以下内容：

HTML

<div ng-controller="AxumTailorMade" class="container-fluid">
    <div class="row">
        <div class="col-md-12 heading clearfix">
            <h3>Axum Integration</h3>
            <img class="pull-right" src="/App_Plugins/Axum/css/images/logo.png" />
        </div>
    </div>
    <div class="row">
        <div class="info-window" ng-bind-html="info">

        </div>
        <div class="col-md-3 update-type">
            <h4>Update All Content</h4>
            <p>Synchronise all content changes that have occured in the past 24 hours.</p>
            <span><button class="button button-axum" type="button" ng-disabled="loadAll" ng-click="getAll()">Update</button><img src="/App_Plugins/Axum/css/images/loader.gif" ng-show="loadAll" /></span>
        </div>
   </div>
</div>

我的angular控制器是这样的：

angular.module("umbraco")
    .controller("AxumTailorMade",
    function ($scope, $http, AxumTailorMade, notificationsService) {
        $scope.getAll = function() {
            $scope.loadAll = true;
            $scope.info = "Retreiving updates";
            AxumTailorMade.getAll().success(function (data) {
                if (!data.Result) {
                    $scope.info = null;
                    notificationsService.error("Error", data.Message);
                } else if (data.Result) {
                    $scope.info = "Content updated";
                    notificationsService.success("Success", data.Message);
                }
                $scope.loadAll = false;
            });
        };
    });

我假设像 jQuery 一样会有某种形式的命名追加函数，但看起来情况并非如此，所以我之前尝试过：

$scope.info = $scope.info + "content updated";

但这会 return

undefinedcontent updated

所以我的问题是如何将 returned HTML 输出到信息 div 而不删除已经存在的内容（如果有的话）。

任何帮助将不胜感激，因为这是我第一次真正尝试 Angular。

Answer 1

我认为您之前尝试的问题是 $scope.info 在您第一次尝试附加到它时未定义。如果它是用 "" 或其他东西初始化的，我认为你使用的简单代码就可以工作：

$scope.info = ""; // don't leave it as undefined
$scope.info = $scope.info + "content updated";

话虽如此，我认为您应该使用 ng-repeat 来列出消息。

例如，如果不只是附加字符串，您可以在控制器中执行此操作：

$scope.info = []; // empty to start

然后您将使用一些控制器方法添加新消息：

$scope.addMessage = function(msg) {
    $scope.info.push(msg)
}

然后在您的 view/HTML 中，您将使用 ngRepeat:

<div class="info-window">
    <p ng-repeat="item in info track by $index">{{item}}</p>
</div>

track by 子句允许重复消息。

Update：如果 $scope.info 中的项目实际上是对象并且您想迭代它们的属性，这就是我认为您在评论中要求的，那么你可能会做这样的事情。不过，这超出了原始问题的范围：

<div class="info-window">
    <p ng-repeat="item in info track by $index">
        <div ng-repeat="(key, value) in item">{{key}} -> {{value}}</div>
    </p>
</div>

使用 Angular JS 将 HTML 附加到 div

Appending HTML to a div using Angular JS

javascript

angularjs

dom