如何在javascript中通过id获取angularjs模拟中的元素？

Question

假设我有按钮：

<button type="submit"
        value="Send" 
         id="btnStoreToDB"
         class="btn btn-primary start"             
         ng-click="storeDB()"
         ng-disabled="!storeDB_button_state"
         >
                <i class="icon-white icon-share-alt"></i>
                <span>Store to DB</span>
            </button> 

在 JS 中获取这个按钮我只是做var btn = $('#btnStoreToDB');，现在可以使用这个按钮。所以我可以通过id 或class 接受它。

但是如何使用angularjs 获取此元素？

我想在加载过程中向按钮添加微调器，如 here (Fiddle) 所示。

由于我所有的项目都开始使用 angulajs，所以我尝试明智地使用它并且不喜欢我怎么知道。

我想添加：ng-model="btnStoreToDB" 并使用这个：

  if($scope.btnStoreToDB){
      var spinner = new Spinner().spin();
      $scope.btnStoreToDB.appendChild(spinner.el);
  } 

但$scope.btnStartUpload 未定义。假设有其他方法可以获取此按钮。

请帮忙

Answer 1

这是个好问题，也是很常见的情况。

Angular 的做法是在按钮上或按钮内使用 ng-show、ng-hide 或 ng-class。

一个想法可能是像这样使用ng-class：

<button ng-class="{ useSpinner: btnStoreToDB }">...</button>

这将在btnStoreToDB 为真时将useSpinner 类添加到按钮，并在btnStoreToDB 为假时删除该类。

另一种方法是像这样使用ng-show：

<button ...>
    <i class="icon-white icon-share-alt"></i>
    <span>Store to DB</span>
    <div class="spinner" ng-show="btnStoreToDb">...</div>
</button> 

现在你的视图和控制器是分开的，你正在用 Angular 方式做事。

Answer 2

angular.element("#btnStoreToDB");

但这里有更多“棱角分明”的方式

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.loading = false;

  $scope.send = function(){
    $scope.loading = true;
    setTimeout(function(){
      alert('finished');
      $scope.$apply($scope.loading = false);
    }, 2000);

  };
});

HTML

<button ng-click="send()">
      <img ng-show="loading" src="http://farmville-2.com/wp-content/plugins/farmvilleajpl/img/loadingbig.gif" width='10'>
      Send!    
</button>

p.s.图片来自自定义来源

p.p.s 就我个人而言，我通常使用 Twitter Bootstrap，并且有一种方法可以更轻松地显示微调器。喜欢<i class="icon-spin icon-spinner" ng-show="loading"></i>

See on Plunker