twitter-bootstrap 如何在javascript中通过id获取的angularjs模拟中获取元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16134918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get element in angularjs analog of get by id in javascript?
提问by Maxim Shoustin
Lets say I have button:
假设我有按钮：
<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>
In JS to get this button I just do var btn = $('#btnStoreToDB');and now can play with this button. So I can take it by idor class.
在 JS 中获得这个按钮我只是做var btn = $('#btnStoreToDB');，现在可以玩这个按钮。所以我可以通过id或接受它class。
But how can I get this element with angularjs?
但是我怎样才能得到这个元素angularjs呢？
I want to add spinner to button during loading like showed here (Fiddle).
我想在加载过程中向按钮添加微调器，如此处所示(Fiddle)。
Since all my project I started to use angulajs only I try to do it wisely and do not like how do I know.
由于我的所有项目都开始使用 angulajs，因此我尝试明智地使用它，并且不喜欢我怎么知道。
I thought to add: ng-model="btnStoreToDB"and use this:
我想添加：ng-model="btnStoreToDB"并使用这个：
if($scope.btnStoreToDB){
var spinner = new Spinner().spin();
$scope.btnStoreToDB.appendChild(spinner.el);
}
but $scope.btnStartUploadis undefined. Suppose there is other way to fetch this button.
但$scope.btnStartUpload未定义。假设有其他方法可以获取此按钮。
Please, help
请帮忙
回答by exclsr
This is a good question, and a very common situation.
这是一个很好的问题，也是一个非常普遍的情况。
The Angular way of doing this is to use ng-show, ng-hideor ng-classon or within your button.
Angular 的做法是在按钮上或按钮内使用ng-show,ng-hide或ng-class。
One idea might be to use ng-classlike so:
一种想法可能是这样使用ng-class：
<button ng-class="{ useSpinner: btnStoreToDB }">...</button>
This will add the class useSpinnerto the button when btnStoreToDBis true, and remove the class when btnStoreToDB is false.
这将useSpinner在btnStoreToDB为 true时将类添加到按钮，并在 btnStoreToDB 为 false 时删除该类。
Another way would be to use ng-showlike this:
另一种方法是ng-show像这样使用：
<button ...>
<i class="icon-white icon-share-alt"></i>
<span>Store to DB</span>
<div class="spinner" ng-show="btnStoreToDb">...</div>
</button>
Now your view and controller are separated, and you are doing things the Angular Way.
现在你的视图和控制器是分开的，你正在以 Angular 的方式做事。
回答by Maksym
angular.element("#btnStoreToDB");
But here is more "angular" way
但这里有更多“角度”的方式
JS
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
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.Image from cutom source
ps图片来自 cutom 源
p.p.spersonally I usually use Twitter Bootstrap and there is a way to show spinners easier. like <i class="icon-spin icon-spinner" ng-show="loading"></i>
pps个人我通常使用 Twitter Bootstrap 并且有一种方法可以更轻松地显示微调器。喜欢<i class="icon-spin icon-spinner" ng-show="loading"></i>
