如何在AngularJS中操作HTML元素（例如jQuery中的$（'＃id'））？

Question

我很熟悉JQuery，但是AngularJS是新的。我正在處理的一個要求是：在啓動http請求時顯示加載圖標和某個HTML元素上方的某條消息（例如DIV），並在http請求完成時將其刪除。

jQuery中，這很簡單，在阿賈克斯處理程序，我可以使用

$('#targetDiv').append(
    '<div class="loading"> 
     <img src="loading.gif"/>Loading, please wait...</div>' 
); 

此代碼簡單地操作DOM元素和無關配車型。在AngularJS中，我該怎麼做？我應該使用指令嗎？

1. 代碼應該在哪裏存在？顯然，代碼不應該在控制器文件或視圖文件中。
2. 如何將控制器代碼，視圖和加載代碼粘合在一起？

最好的問候， 扎克

Answer 1

這是很簡單的實際上是：

1. 顯示加載DIV如果某些範圍標誌爲true：

   <div class="loading" ng-show="shouldLoadingDivBeDisplayed"> 
       ... 
   </div> 
   

2. 在您的控制器，當你想要顯示加載div時，將此標誌設置爲true;當你想隱藏時，將此標誌設置爲false：

   $scope.loadSomething = function() { 
       $scope.shouldLoadingDivBeDisplayed = true; 
       $http.get('/foo') 
        .success(function() { 
          $scope.shouldLoadingDivBeDisplayed = false; 
          ... 
        }); 
   };