将控制转换为 Angular 指令？

Question

我们的网站上有这个按钮：

<button class="btn btn-primary" id="button-loading-example" 
      ng-click="progress.buttonLoading.load()" 
      ng-model="progress.buttonLoading" pb-button-progress
      type="button">Save</button>

与此相关的 ng-model，在控制器中（控制器为“进度”）：

 _this.buttonLoading = {
  isLoading: false,
  text: 'Saving',
  load: function() {
    _this.buttonLoading.isLoading = true;
    $timeout(function() {
      _this.buttonLoading.isLoading = false;
    }, 2000);
  }
};

我正在尝试将此作为指令。我可以从我的元素中传递类和标签：

<pb-spinner-button ng-class-list="btn btn-primary">Save</pb-spinner-button>

我不知道如何连接（或简单地丢弃和取代）ng-model，更糟糕的是，我不知道在哪里挂接旧控制器中的“加载”功能。

我意识到旧的控制很可能是过度的，应该是指令，但我继承的人是指令厌恶的。

到目前为止，这是我的指令：

  (function() {

  'use strict';

  angular.module('app').directive('pbSpinnerButton', function() {
    return {
      restrict: 'E',
      require: 'ngModel',
      scope: {
        ngModel: '=',
        ngClassList: '@'

      },
      controller: 'SpinnerController',
      template: '<button class="{{ngClassList}}" ng-click="buttonLoading.load()" ng-model="buttonLoading" pb-button-progress type="button"><ng-transclude></button>',
      transclude: true,
      link: function postLink(scope, element, attrs) {
      }
    };
  })


  .controller('SpinnerController', function($timeout) {

    var _this = this;
    _this.buttonLoading = {
      isLoading: false,
      text: 'Saving',
      load: function() {
        _this.buttonLoading.isLoading = true;
        $timeout(function() {
          _this.buttonLoading.isLoading = false;
        }, 2000);
      }
    };

  });

})();

根据要求，这里是一个 plunkr：http://plnkr.co/edit/EOekzFdUDrArZ4dkolLl?p=preview

Answer 1

首先，我认为 ng-model 在按钮中没有任何用途。如果意图是动态设置按钮的文本值，那么您应该使用这种方法：

<button class="btn btn-primary" id="button-loading-example" 
  ng-click="progress.buttonLoading.load()" 
  pb-button-progress type="button">{{progress.buttonLoading.text}}</button>

此外，您的指令模板似乎没有正确使用 ng-transclude，并且自定义指令及其属性不应使用“ng-”前缀。

这是我认为您正在寻找的示例实现：

angular.module('app').directive('pbSpinnerButton', function() {
  return {
    restrict: 'E',
    template: '<button class="{{classList}}" ng-click="onClick()" pb-button-progress type="button" ng-transclude></button>',
    scope: {
      classList: '@',
      onClick: '&'
    },
    transclude: true
  };
});

然后将其包含在您的控制器模板 HTML 中：

<pb-spinner-button class-list="btn btn-primary"
  on-click="progress.buttonLoading.load()"
>{{progress.buttonLoading.text}}</pb-spinner-button>

您可以在这里查看并运行一个简单的实现：http://jsfiddle.net/gagkbsra