Question

我正在使用字体真棒图标，我想在点击时更改按钮图标和颜色我已经写了指令

directive('uiToggleClass', ['$timeout', '$document', function($timeout, $document) {
    return {
      restrict: 'AC',
      link: function(scope, el, attr) {
        el.on('click', function(e) {
          e.preventDefault();
          var classes = attr.uiToggleClass.split(','),
              targets = (attr.target && attr.target.split(',')) || Array(el),
              key = 0;
          angular.forEach(classes, function( _class ) {
            var target = targets[(targets.length && key)];            
            ( _class.indexOf( '*' ) !== -1 ) && magic(_class, target);
            $( target ).toggleClass(_class);
            key ++;
          });
          $(el).toggleClass('active');

          function magic(_class, target){
            var patt = new RegExp( '\\s' + 
                _class.
                  replace( /\*/g, '[A-Za-z0-9-_]+' ).
                  split( ' ' ).
                  join( '\\s|\\s' ) + 
                '\\s', 'g' );
            var cn = ' ' + $(target)[0].className + ' ';
            while ( patt.test( cn ) ) {
              cn = cn.replace( patt, ' ' );
            }
            $(target)[0].className = $.trim( cn );
          }
        });
      }
    };
  }]);

和我的index.html

<div class="jumbotron" ng-app="plunker">
    <p>
        <button class="btn btn-default" ui-toggle-class="btn-success">
          <i class="fa fa-cloud-upload text"></i>
          <span class="text">Upload</span>
          <i class="fa fa-check text-active"></i>
          <span class="text-active">Success</span>
        </button>
    </p>
  </div>

但点击时按钮是不是可以帮助我？这是 FIDDLE

Answer 1

你的小提琴有很多错误（你需要设置"no wrap - in <head>"让Angular起作用。）另外，你有$变量undefined - 你的意思是包括{ {1}}？对于您的简单示例，您不必将其定义为：

jQuery

这是你的分叉fiddle。

但你实际上并不需要这些。您可以使用内置的var $ = angular.element; // jqLite指令：

ng-class

修改：

如果您需要更改按钮的内容，可以重新使用<button class="btn btn-default" ng-class="{'btn-success': active}" ng-click="active = !active">Toggle</button>变量来切换显示的内容：

active

fiddle

Answer 2

伙计我想要的是当我点击它时更改按钮，这意味着我想要一个新的字体图标出现，颜色也要改变，因为我已经写了一个ui切换指令和一些css诀窍 **

UPDATED FIDDLE

**

.btn-default {
  color: #58666e !important;

}
.btn-success {
  color: #ffffff !important;
  background-color: #27c24c;
  border-color: #27c24c;
}
.text-active,
.active > .text,
.active > .auto .text {
  display: none !important;
}

.active > .text-active,
.active > .auto .text-active {
  display: inline-block !important;
}

我正在尝试创建一个按钮，在angularjs

2 个答案: