代码之家 › 专栏 › 技术社区 › jezzipin

使用Angular JS将HTML附加到div

dom angularjs javascript

jezzipin · 技术社区 · 10 年前

我目前正在使用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。

1 回复 | 直到 10 年前

Michael Oryl 10 年前

我认为您之前尝试的问题是,在您第一次尝试将$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 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>