Javascript 我正在尝试创建一个按钮，当在angularjs中单击时，该按钮会更改其图标和颜色

我正在使用字体可怕的图标，我想改变按钮图标和颜色时，我已经写了一个指令点击

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>

上传
成功

但是当点击按钮时，它并没有改变按钮。有人能帮我吗？

---

这是

您的小提琴有一大堆错误（您需要设置

“no wrap-in”

，以便角度调整工作）。此外，您还有

$

变量，它是

未定义的

-您的意思是包括

jQuery

？对于您的简单示例，您不必将其定义为：

var $ = angular.element; // jqLite

这是你的工作叉

但实际上你不需要这些。您只需使用内置的

ng class

指令即可：

<button class="btn btn-default" ng-class="{'btn-success': active}"
        ng-click="active = !active">Toggle</button>

---

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

**

---

谢谢你的回答如果我只想显示上传按钮，当点击该按钮时，我想显示成功按钮，我如何隐藏按钮直到点击为止？“隐藏按钮直到点击”？你的意思可能是“点击时”。例如，您可以使用

ng show

。实现这一点的方法有很多，每种方法都比另一种更适合于特定场景。我建议你问一个新问题——或者更确切地说，看看类似的问题（有很多）是如何被回答的——你当然可以用CSS手动完成，或者你可以只使用

ng show

，它会自动完成同样的任务，并使HTML更容易理解。见我编辑的答案

<button class="btn btn-default" ng-class="{'btn-success': active}"
        ng-click="active = !active">

  <i    ng-hide="active" class="fa fa-cloud-upload text"></i>
  <span ng-hide="active" class="text">Upload</span>

  <i    ng-show="active" class="fa fa-check text-active"></i>
  <span ng-show="active" class="text-active">Success</span>

</button>

.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;
}