AngularJs ToolTips实现

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

猜你喜欢