javascript - 在angularjs中单击时切换按钮文本的值

Question

尝试使用以下指令在单击时切换按钮文本的值：

   .directive('startstop', function() {
      return {
        restrict: 'E',
        template: '<input value="" class="btn btn-success btn-lg">',
        link: function(scope, elem, attrs) {
          elem.bind("click", function(){
            console.log('startstop clicked', elem)
            if(elem.val() == "start") {
               elem.val("stop");   
            }
            else {
               elem.val("start");
            }
          })
        }
      }
   });

我能够检测到点击事件，当我直接在控制台中查看 elem 时，它的值实际上正在被修改……但我没有看到按钮更新的值。我怎样才能做到这一点？

Answer 1

工作示例

你能检查下面的代码：

模板代码：

<startstop></startstop>

指令代码：

directive('startstop', function() {
      return {
        restrict: 'E',
        replace:true,
        template: '<input type="button" value="" class="btn btn-success btn-lg">',
        link: function(scope, elem, attrs) {
          elem.bind("click", function(){
            console.log('startstop clicked', elem)
            if(elem.val() == "start") {
               elem.val("stop");   
            }
            else {
               elem.val("start");
            }

          })
        }
      }
   });

Answer 2

更改restrict: 'E'为restrict: 'A'，您的代码效果很好。这是模板

<input type="button" startstop value="button"></input>

Working Demo