使用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

回答

相關問題