Question

查看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);
          });
        }
      });
    }
  };
}])

Answer 1

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

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

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

如何修改角度ui.bootstrap.buttons模块中的按钮配置（buttonConfig）？

1 个答案: