5

假设我有按钮：

<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呢？

我想在加载过程中向按钮添加微调器，如此处所示（小提琴）。

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

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

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

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

请帮忙

4

2 回答 2

6

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

执行此操作的 Angular 方法是在按钮上或按钮内使用ng-show、ng-hide或ng-class。

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

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

这将在为 trueuseSpinner时将类添加到按钮btnStoreToDB，并在 btnStoreToDB 为 false 时删除类。

另一种方法是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 方式做事。

于 2013-04-21T19:39:32.543 回答
3 
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>

ps图片来自自定义来源

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

参见 Plunker

于 2013-04-21T19:38:41.223 回答