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的解决方案，所以我没有在我的指令中观察/ $观察...... 指令中的html似乎是正确的但当我按下“删除”按钮时没有任何反应。有人可以帮帮我吗？非常感谢你！

Answer 1

你需要使用mySpinner（双向绑定）而不是=（单向绑定）传递@的值。这背后的原因是，当你使用{{ 1}}表示您将使用插值@指令通过属性传递值，最终会将{{}}转换为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; });＆amp; ng-class有条件地应用课程。

ng-show

Update PLunkr

我的AngularJS Spinner指令失败了

1 个答案: