AngularJs ToolTips实现

来源：互联网发布：qq空间推广软件编辑：程序博客网时间：2024/06/07 14:44

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

0 0