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>

enter image description here

在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>

当useSpinner为true时，这会将类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方式做事。

Answer 2

angular.element("#btnStoreToDB");

但是这里有更多＆＃34;棱角分明＆＃34;方式

<强> 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。来自cutom来源的图片

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

See on Plunker

如何在javascript中获取由id获取的angularjs模块中的元素？

2 个答案: