1

查看 angular-ui 引导代码，我注意到按钮配置被传递到指令中。配置定义了活动类和切换事件。我想在不修改 angular-ui 引导代码的情况下修改这些。使用此指令时如何传入我自己的配置？

以下是 angular-ui bootstrap 提供的代码：

angular.module('ui.bootstrap.buttons', [])

  .constant('buttonConfig', {
    activeClass:'active',
    toggleEvent:'click'
  })

  .directive('btnRadio', ['buttonConfig', function (buttonConfig) {
  var activeClass = buttonConfig.activeClass || 'active';
  var toggleEvent = buttonConfig.toggleEvent || 'click';

  return {

    require:'ngModel',
    link:function (scope, element, attrs, ngModelCtrl) {

      var value = scope.$eval(attrs.btnRadio);

      //model -> UI
      scope.$watch(function () {
        return ngModelCtrl.$modelValue;
      }, function (modelValue) {
        if (angular.equals(modelValue, value)){
          element.addClass(activeClass);
        } else {
          element.removeClass(activeClass);
        }
      });

      //ui->model
      element.bind(toggleEvent, function () {
        if (!element.hasClass(activeClass)) {
          scope.$apply(function () {
            ngModelCtrl.$setViewValue(value);
          });
        }
      });
    }
  };
}])
4

1 回答 1

2

这很简单，只需buttonConfig在应用程序的模块中创建一个命名的常量：

angular.module('myAppModule', ['ui.bootstrap'])
  .constant('buttonConfig', {
    activeClass:'my-active-class'
  });

这是一个工作的 plunker：http ://plnkr.co/edit/Hw5ahEos8UC5P23nV4oW?p=preview

于 2013-05-08T18:04:02.570 回答