angularjs中的动态标题 - 使用ng-attr-title

Question

如何在angularJS中获得动态标题.我知道ng-attr-title如下所示使用

<div ng-app="myApp" ng-controller="ctrl">
<div ng-attr-title="{{title}}">Hover me</div>
</div>

而控制器是

var app = angular.module('myApp', []);
function ctrl($scope){
$scope.title = "I 'm a tooltip!";    
}

这是JSfiddle及其工作原理.我正在尝试的是在启用时有两个不同的标题,而在禁用时有另一个,所以我想决定ng-attr-title在运行时进入的变量,如下所示.

<div ng-app="myApp" ng-controller="ctrl">
<div ng-attr-title="{{message}}">Hover me</div>
</div>

而控制器是

var app = angular.module('myApp', []);
function ctrl($scope){
$scope.Enabledtitle = "U can click me";
$scope.Disabledtitle = "U cannot click me";
 $scope.message="Enabledtitle";    
}

所以,当我徘徊时,我应该得到工具提示说"你可以点击我".因此,只需更新范围变量,我就可以灵活地在工具提示消息之间切换message

这是JSfiddle,我尝试了动态标题,并将"Enabledtitle"作为工具提示而不是"U可以点击我".

我怎样才能告诉角度解析{{Enabledtitle}}并赋予其价值.

Answer 1

您将需要使用括号表示法来访问具有变量名称的属性.所以title属性变为ng-attr-title="{{this[message]}}:

var app = angular.module('myApp', []);

function ctrl($scope) {
    $scope.Enabledtitle = "U can click me";
    $scope.Disabledtitle = "U cannot click me";
    $scope.message = "Enabledtitle";
}

<script src="http://code.angularjs.org/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
    <div ng-attr-title="{{this[message]}}">Hover me</div>
</div>

在您的情况下,this指向当前范围对象$scope,您正在通过动态键读取它的属性message.

演示: http ://jsfiddle.net/oetd3bvy/2/

Answer 2

在控制器中:

$scope.getMessage() {
    return isEnabled ? "You can click me" : "You can't click me";
}

在视图中:

<div title="{{ getMessage() }}">...</div>

或者,每次代码更改isEnabled标志的值时,也会更改消息.