angularjs - AngularJS-ngClick，自定义指令和隔离范围问题

Question

考虑以下指令:(Live Demo)

app.directive('spinner', function() {
  return {
    restrict: 'A',
    scope: {
      spinner: '=',
      doIt: "&doIt"
    },
    link: function(scope, element, attrs) {
      var spinnerButton = angular.element("<button class='btn disabled'><i class='icon-refresh icon-spin'></i> Doing...</button>");
      element.after(spinnerButton);

      scope.$watch('spinner', function(showSpinner) {
        spinnerButton.toggle(showSpinner);
        element.toggle(!showSpinner);
      });
    }
  };
}); 

像这样使用:

<button ng-click="doIt()" spinner="spinIt">Spin It</button>

当 spinner的值(即本示例中 $scope.spinIt的值)为 true时，应隐藏该元素，而应显示 spinnerButton。当 spinner的值为 false时，该元素应该可见，并且 spinnerButton应该隐藏。

这里的问题是 doIt()不在隔离范围内，因此单击时不会调用。

实现此指令的“Angular 方式”是什么？

Answer 1

我的建议是看看这些微调器发生了什么。 Be a little more API focused。

相关部分如下。我们使用常规的回调函数来指示完成的时间，因此微调框知道重置按钮的状态。

function SpinDemoCtrl($scope, $timeout, $q) {
  $scope.spinIt = false;

  $scope.longCycle = function(complete) {
    $timeout(function() {
      complete();
    }, 3000);
  };

  $scope.shortCycle = function(complete) {
    $timeout(function() {
      complete();
    }, 1000);
  };
}

app.directive('spinnerClick', function() {
  return {
    restrict: 'A',
    scope: {
      spinnerClick: "=",
    },
    link: function(scope, element, attrs) {
      var spinnerButton = angular.element("<button class='btn disabled'><i class='icon-refresh icon-spin'></i> Doing...</button>").hide();
      element.after(spinnerButton);

      element.click(function() {
        spinnerButton.show();
        element.hide();

        scope.spinnerClick(function() {
          spinnerButton.hide();
          element.show();
        });
      });
    }
  };
});

Here's one that expects use of $q 。它可以更好地与Angular风格的异步操作配合使用，并通过在实现promise时重置微调器来消除回调函数。