angularjs中的动态标题-使用ng-attr-title
angularjs中的动态标题-使用ng-attr-title
提问于 2015-10-29 15:11:58
如何在angularJS.I中获得动态标题。我知道如何使用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 can click me”。
我如何让angular解析{{Enabledtitle}}并给出它的值。
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-10-29 15:18:18
您将需要使用bracket notation来访问具有变量名称的属性。因此，标题属性变成了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读取它的属性。
Stack Overflow用户
发布于 2015-10-29 15:14:40
在控制器中：
$scope.getMessage() {
return isEnabled ? "You can click me" : "You can't click me";
}在视图中：
<div title="{{ getMessage() }}">...</div>或者，每次代码更改isEnabled标志的值时，也会更改消息。
Stack Overflow用户
发布于 2015-10-29 15:16:45
做
$scope.message=$scope.Enabledtitle; 而不是
$scope.message="Enabledtitle";页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33407974
复制相关文章
相似问题
腾讯云开发者
