您的位置：首页 > Web前端 > AngularJS

AngularJs ToolTips实现

2015-12-06 10:59 1406 查看

题记：本篇文章实现功能可以随意实现tooltip，把tooltips封装成angularjs中的指令，方便使用，参照https://github.com/shu-frank-csdn/angular-tooltips

1 github的例子，下载下来后，可以直接看index.html，但是要在index.html中加依赖的js文件，加如下代码就可以了：

<script type="text/javascript" src="dist/angular.js"></script>
<script type="text/javascript" src="dist/angular-tooltips.js"></script>
<script type="text/javascript" src="demo/js/index.js"></script>

2 然后把代码放到自己的项目中，

注意：github下载下的代码中用了controllerAs的用法，所以没有用到$scope而是用this来代替，这是一种代码规范，可以查看 https://github.com/johnpapa/angular-styleguide/blob/master/i18n/zh-CN.md#controllers在我改的代码中，用了$scope，以下是代码部分：
html:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dist/angular-tooltips.css">
<script type="text/javascript" src="dist/angular.js"></script>
<script type="text/javascript" src="dist/angular-tooltips.js"></script>
<script type="text/javascript" src="DemoCtrl.js"></script>
<title>tooltips demo</title>
</head>
<body ng-app="DemoApp" ng-controller="DemoCtrl">
<p>{{greeting.text}},Angular</p>
<div>
<span tooltips tooltip-side="bottom" tooltip-template="<div>{{tooltipText}}</div>">I'm a tooltip content</span>
</div>
</body>

</html>

3 js部分

注意新加的模块的写法

angular.module('DemoApp', [
'720kb.tooltips'
])
.config(['tooltipsConfProvider', function configConf(tooltipsConfProvider) {
tooltipsConfProvider.configure({
'size': 'large',
'speed': 'slow'
});
}])
.controller('DemoCtrl', ['$scope',
'$timeout',
function controllerCtrl($scope,$timeout) {
$scope.greeting = {
text: 'Hello'
};
$scope.tooltipText = 'I\'m a text from </br> module controller';
}
]);

下载链接：http://download.csdn.net/detail/u011563903/9330359

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angularjs t tooltip

相关文章推荐

新的分享

章节导航