javascript - 使用 Angular JS 将 HTML 附加到 div

Question

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

我的想法是，我想创建一种历史 Pane ，每次用户单击按钮以触发对我们的 Web 服务的 Web 请求时，该 Pane 都会更新。 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 Controller 是这样的:

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 输出到信息 div 而不删除那里已经存在的内容(如果有的话)。

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

Answer 1

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

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

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

例如，如果不只是附加字符串，您可以在 Controller 中执行此操作:

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

然后您将使用一些 Controller 方法添加新消息:

$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 子句允许重复消息。

更新:如果 $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>