2

我正在使用 AngularJS、CSS 和 HTML。

这就是我想要做的：一个按钮被禁用基于某个功能的输出isPublished()。我需要将悬停文本悬停在按钮上，例如当按钮被禁用时，悬停在文本上可能是“ I'm disabled”，而当它未被禁用时，悬停在文本上可能是“ I'm not disabled”。

代码：

<span>
<input title="Im disabled" type="button" class="btn btn-primary" 
        value="Publish" ng-click="publishFingerPrint()" ng-hide="isEdit"
        ng-disabled="isPublished()"/>
</span>

<script>
$(function () {
    $(".btn btn-primary:ng-disabled").wrap(function() {
        return '<span title="' + $(this).attr('title') + '" />';
    });
});
</script>

使用上面的代码，我得到了按钮上的悬停文本（禁用时和未禁用时）。但问题是文本是相同的 = Im not disabled。我需要2个不同的文本。我也尝试了 ng-mouseover 但由于某种原因它不起作用，所以我使用了 title 属性。

谁能帮我解决这个问题？任何帮助表示赞赏！谢谢！

4

2 回答 2

2

似乎您想动态或在某些操作上更改标题（悬停标题），可以将标题属性指定为ng-attr-title="{{ message }}"

您可以更改ngDisabled函数中的标题。

$scope.isPublished = function(){
   $scope.message = "I'm disalbed";
}


var app = angular.module('myApp', []);
function ctrl($scope) {
    $scope.message = "Old Title";
    $scope.changeTitle = function(){
      $scope.message = "New Title";
    };
}
<script src="http://code.angularjs.org/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
    <div ng-attr-title="{{ message }}">Hover me</div>
    <br/><br/>
    {{message}}
    <button ng-click="changeTitle()">Change Hover Title</button>
</div>

于 2016-09-22T08:09:27.173 回答
1

你可以尝试这样的事情。

<body ng-app="app" ng-controller="ctr">
       <button type="button" class="btn btn-primary" ng-click="disable = !disable;changeTitle();">Click</button>
       <input title="{{title}}" type="button" class="btn btn-primary" value="Publish"  ng-disabled="disable"/>
      <script>
        angular.module('app',[]).controller('ctr',function($scope){
          $scope.changeTitle = function(){
            $scope.title = $scope.disable ? 'I m disabled' : 'I m not disabled';
          }
        })
      </script>
  </body>

看看工作plunker。

于 2016-09-22T08:22:48.677 回答