使用Angular JS将HTML附加到div

我目前正在使用AngularJS构建一个Umbraco仪表板扩展，并且想知道是否有一种方法可以将HTML附加到我的页面上的div。使用Angular JS将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到信息的div不删除已在那里的内容（如果有的话）。

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

来源

2015-02-05 jezzipin

一般来说，使用Angular时不应该追加HTML。相反，使用绑定在视图中动态生成输出。这篇文章可能与你有关：[在AngularJS中思考如果我有jQuery背景]（http://stackoverflow.com/q/14994391/830125）。 – 2015-02-05 17:30:22

如果你看一下我的代码确实实地势必不过，我不想要的内容到下一个请求之后被清除做。相反，内容应该更新。我将要运行的方法是完全独立的。您提供的文档并不能真正帮助您，因为我已经知道大部分内容。 – jezzipin 2015-02-05 17:34:03

请参阅下面的答案（http://stackoverflow.com/a/28350683/830125），你会明白我的意思。而不是只追加原始的HTML，他们使用的是'NG-repeat'，这是在角度和灵活的代码精神，一般多。 – 2015-02-05 19:35:56

我想你以前的尝试的问题是，第一次尝试追加到$ scope.info时未定义。如果它一直以“”什么的初始化，我觉得你有简单的代码会工作：

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

虽这么说，你应该使用NG重复，在我看来，要列出了消息。

例如，而不是如果只是将字符串，你可以在你的控制器做到这一点：在

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

然后：

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

，那么你会用一些控制方法添加新信息您的视图/ 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>

来源

2015-02-05 17:48:04

好吧，那太好了。但是，如果我的Web服务中返回的某个项目本身就是一个对象，例如：对象{5118 =“哥斯达黎加”，5129 =“厄瓜多尔和加拉帕戈斯”，4851 =“委内瑞拉”} 然后遍历这些项目并输出键值对？ – jezzipin 2015-02-06 12:51:07

@jezzipin看看我的答案更新。我希望这就是你所问的。但是现在你已经开始使用ng-repeat了。网上有很多关于这方面的文档，在这里也是如此。 – 2015-02-06 14:52:30

谢谢。在一个小时前自己想出来，但感谢回复。 – jezzipin 2015-02-06 14:56:46

使用Angular JS将HTML附加到div

回答

相关问题