моя директива AngularJS Spinner терпит неудачу

Я просто написал эту простую директиву, чтобы показать кок на мою кнопку, пока что-то отдаленное происходит: http://plnkr.co/edit/rAJ4X7A3iidmqUD2M63A?p=preview моя директива AngularJS Spinner терпит неудачу

HTML:

<!DOCTYPE html> 
<html ng-app="app"> 

    <head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
     <script src="script.js"></script> 
    </head> 

    <body ng-controller="myController as vm"> 

     <button ng-click="vm.saveAction()" class="btn btn-primary" type="button"> 
      <!-- Original template --> 

      <i class="fa fa-floppy-o" ng-hide="vm.save"></i> 
      <i class="fa fa-circle-o-notch fa-spin ng-hide" ng-show="vm.save"></i> Save 

      <!-- end --> 
     </button> 

     <button ng-click="vm.removeAction()" class="btn btn-default" type="button"> 
      <!-- Desired template (directive) --> 

      <i my-spinner="vm.remove" icon="fa fa-trash"></i> Remove 

      <!-- end --> 
     </button> 

    </body> 

</html>

ЯШ:

app = angular.module('app', []); 

app.controller('myController', ['$timeout', function($timeout) { 
    var vm = this; 

    vm.save = false; 
    vm.remove = false; 

    vm.saveAction = function() { 
       vm.save = true; 

       // ...save something remote 

       $timeout(function() { // <-- simulate an async callback or whatever... 
       vm.save = false; 
       }, 3000); 
    }; 

     vm.removeAction = function() { 
       vm.remove = true; 

       // ...remove something remote 

       $timeout(function() { // <-- simulate an async callback or whatever... 
        vm.remove = false; 
       }, 3000); 
    }; 
}]); 

app.directive('mySpinner', function() { 
    var directive = { 
     restrict: 'A', 
     scope: { 
      mySpinner: '@', 
      icon: '@' 
     }, 
     template: '<i class="{{icon}}" ng-hide="{{mySpinner}}"></i>' + 
        '<i class="fa fa-circle-o-notch fa-spin ng-hide" ng-show="{{mySpinner}}"></i>', 
    }; 

    return directive; 
});

Я решил использовать это решение на основе ng-show и ng-hide, поэтому мне не нужно смотреть/смотреть в моей директиве ничего ... html из директивы кажется но когда я нажимаю кнопку «Удалить», ничего не происходит. Кто-нибудь может мне помочь? Большое спасибо!

источник

2015-12-13 wizzy

Вам нужно передать значение mySpinner с использованием = (связывание два способа) вместо @ (связывание один путь), Причина этого, как вы используете @ означает, что вы передадите значение через атрибут директивы интерполяции {{}}, который в конечном итоге преобразует bool в string, а значение выражения ng-show всегда станет истинным.

Другая причина этого не работал это вы использовали {{}} интерполяции в ng-show & ng-hide директивы.

Директива

app.directive('mySpinner', function() { 
    var directive = { 
    restrict: 'A', 
    scope: { 
     mySpinner: '=', 
     icon: '@' 
    }, 
    template: '<i class="{{icon}}" ng-hide="mySpinner"></i>' + 
     '<i class="fa fa-circle-o-notch fa-spin ng-hide" ng-show="mySpinner"></i>', 
    }; 
    return directive; 
});

Вы можете реорганизовать вы шаблон использовать ng-class вместо использования ng-show & ng-hide, применяя классы условно.

template: '<i ng-class="mySpinner ? \'fa fa-circle-o-notch fa-spin=\': icon"></i>'

Update PLunkr

источник

2015-12-13 16:14:21

Спасибо! Я предпочитаю решение в вашем втором последнем плунжере. – wizzy

моя директива AngularJS Spinner терпит неудачу

ответ

Смежные вопросы