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与此相关联，在控制器中（控制器为＆＃34;进度＆＃34;）：

 _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模型，更糟糕的是，我不知道在哪里挂钩＆＃34;加载＆＃34;在旧控制器中运行。

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

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

  (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，并且自定义指令及其属性不应该使用＆＃39; ng - ＆＃39;前缀。

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

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

将控制转换为Angular Directive？

1 个答案: