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

如何在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";    
}

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

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

我怎样才能告诉angular解析{{Enabledtitle}}并给它赋值.

您将需要使用 bracket notation来访问具有变量名称属性.因此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>

在您的情况下,这指向当前范围对象$scope,您正在通过动态密钥消息读取它的属性.

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

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...