我的 AngularJS Spinner 指令失败

Question

我刚刚编写了这个简单的指令，以便在发生远程操作时在我的按钮上显示一个微调器：http://plnkr.co/edit/rAJ4X7A3iidmqUD2M63A?p=preview

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>

js:

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 的解决方案，所以我没有在我的指令中 $observe/$watch nothing... 指令中的 html 似乎是正确的，但是当我按下“删除”按钮时，什么也没有发生。有人可以帮助我吗？非常感谢！

Answer 1

您需要使用 =（双向绑定）而不是 @（单向绑定）传递 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

我的 AngularJS Spinner 指令失败

my AngularJS Spinner directive fails

javascript

spinner

angularjs

angularjs-directive