Làm thế nào để có được yếu tố trong tương tự angularjs nhận được bởi id trong javascript?

Question

phép nói rằng tôi có nút:

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

Trong JS để có được nút này tôi chỉ làm var btn = $('#btnStoreToDB'); và bây giờ có thể chơi với nút này. Vì vậy, tôi có thể mang nó theo id hoặc class.

Nhưng làm thế nào tôi có thể nhận được phần tử này với angularjs?

Tôi muốn thêm spinner vào nút trong khi tải như hiển thị here (Fiddle).

Vì tất cả các dự án của tôi, tôi bắt đầu sử dụng angulajs chỉ tôi cố gắng làm điều đó một cách khôn ngoan và không thích làm thế nào để tôi biết.

Tôi nghĩ thêm: ng-model="btnStoreToDB" và sử dụng này:

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

nhưng $scope.btnStartUpload là undefined. Giả sử có cách khác để tìm nạp nút này.

Xin vui lòng, giúp

Answer 1

Đây là một câu hỏi hay, và một tình huống rất phổ biến.

Cách góc làm việc này là sử dụng ng-show, ng-hide hoặc ng-class trên hoặc trong nút của bạn.

Một ý tưởng có thể được sử dụng ng-class như vậy:

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

này sẽ thêm lớp useSpinner nút khi btnStoreToDB là đúng, và loại bỏ các lớp khi btnStoreToDB là sai.

Một cách khác là sử dụng ng-show như thế này:

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

Bây giờ xem và điều khiển của bạn được tách ra, và bạn đang làm mọi thứ theo cách góc.

Answer 2

angular.element("#btnStoreToDB"); 

Nhưng ở đây là nhiều "góc" cách

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. Hình ảnh từ nguồn cắt

p.p.s cá nhân Tôi thường sử dụng Twitter Bootstrap và có cách để hiển thị spinners dễ dàng hơn. như <i class="icon-spin icon-spinner" ng-show="loading"></i>

See on Plunker