使用角JS将HTML附加到div

Question

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

我的想法是，我想创建一种历史窗格，每当用户单击一个按钮来触发对我们的web服务的web请求时，它就会被更新。然后，web请求返回在Umbraco中更新的每个页面，以及指向每个页面的链接。

到目前为止，我有以下几点：

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.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";

但这会回来的

undefinedcontent updated

因此，我的问题是如何将返回的HTML输出到info div，而不删除已经存在的内容(如果有的话)。

任何帮助都将非常感谢，因为这是我第一次真正的尝试与角度。

Answer 1

我认为您之前的尝试的问题是，$scope.info在您第一次尝试附加到它时是未定义的。如果它是用"“或其他什么来初始化的，我认为您所使用的简单代码是有效的：

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

尽管如此，在我看来，你应该使用ng-重复来列出信息。

例如，如果不只是追加字符串，而是可以在控制器中这样做：

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

然后，使用某种控制器方法添加新消息：

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

然后在您的视图/HTML中，您将使用ngRepeat：

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

track子句允许重复消息。

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>