题记:本篇文章实现功能可以随意实现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