angularjs - Directive to disable and show load sign on a button during http-request -



angularjs - Directive to disable and show load sign on a button during http-request -

consider runnable illustration http://plnkr.co/edit/a88coydvordhqv3b5ngj?p=preview

angular.module('app', ['ngroute']) .controller('myctrl',['$scope', '$timeout', function($scope, $timeout){ $scope.myjson = [{title:'one'},{title:'two'},{title:'three'}]; $scope.remove = function(idx){ $scope.loading = true; $timeout(function(){ $scope.myjson.splice(idx,1); $scope.loading = false }, 700) } }]) .filter('unsafe', function($sce) { homecoming function(val) { homecoming $sce.trustashtml(val); }; }) </script> <div ng-controller="myctrl"> <div ng-repeat="j in myjson"> <a class="btn btn-default" ng-bind-html=" loading? ( '<i class=\'fa fa-refresh fa-spin\'></i>' | unsafe) : ('save' | unsafe)" ng-disabled="loading" ng-click="remove($index)">remove</a> <b>{{j.title}}</b> </div> </div>

the timeout simulate http-request removing entities. works if there 1 button (for illustration login or register). problem each of entities need have individual loading variable, , don't know how it. want button clicked on show loading symbol. many buttons think need directive...

this why invented angular directives. can create directive isolated scope, , apply each of buttons.

angular.module('app', ['ngroute']) .controller('myctrl',['$scope', '$timeout', function($scope, $timeout){ $scope.myjson = [{title:'one'},{title:'two'},{title:'three'}]; }]).directive('loader',function() { homecoming { restrict: 'a', scope: true, controller: ['$scope', '$timeout', function($scope, $timeout) { $scope.remove = function(idx){ $scope.loading = true; $timeout(function(){ $scope.myjson.splice(idx,1); $scope.loading = false }, 700) } }] }; })

i've changed plunkr demonstrate.

angularjs angularjs-directive angularjs-ng-repeat

Comments

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -