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

Question

我对 JQuery 很熟悉，但对 AngularJS 很陌生。我正在处理的一个要求是：在启动 http 请求时在给定的 HTML 元素（例如 DIV）上方显示加载图标和一些消息，并在 http 请求完成时将其删除。

在 jquery 中，这很简单，在 ajax 处理程序中，我可以使用

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

这段代码只是操作 DOM 元素，与模型无关。在 AngularJS 中，我该怎么做？我应该使用指令吗？

1. 代码应该放在哪里？显然，代码不应该在控制器文件或视图文件中。
2. 如何将控制器代码、视图和加载代码粘合在一起？

最好的问候，扎克

Answer 1

其实很简单：

1. 如果某个范围标志为真，则显示加载 div：

   <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;
                  ...
            });
   };