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而不删除其中已有的内容（如果有的话）。

任何帮助都会非常感激，因为这是我第一次尝试使用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)
}

然后在您的视图/ 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>

使用Angular JS将HTML附加到div

1 个答案: