angular-intro是intro.js的一个针对angularjs的封装，它可以轻松地为网站提供教程或说明。以下是如何使用angular-intro的简单说明

2 年 ago
雅, 悟
2 minutes

标题太长了，我是大桥。
在网站上，有一个叫做intro.js的东西可以实现网站教程之类的简单功能。

有一个名为angular-intro的东西，它可以让你在AngularJS中使用它，但网站上没有太多关于详细安装和使用的说明，所以我将在这里进行记录。

终究

可以学会像那样的技能。

スクリーンショット 2014-02-04 14.16.43.png

再者，演示网站是http://code.mendhak.com/angular-intro.js/。

安裝

由于可以通过Bower使用，因此使用Bower获取。

$ bower install angular-intro.js

如果未使用bower，可以从演示网站下载。

当从bower获取或下载所需的JavaScript和CSS文件后，将它们加载进来。

<head>
<!-- なんか他のheadタグ内 -->
    <link rel="stylesheet" type="text/css" href="bower_components/angular-intro.js/lib/introjs.css">
</head>
<body>
<!-- なんか他のbodyタグ内 -->

    <!-- jquery無くてもいいかも -->
    <script src="bower_components/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="bower_components/angular-unstable/angular.min.js"></script>
    <script src="bower_components/angular-intro.js/lib/intro.min.js"></script>
    <script src="bower_components/angular-intro.js/build/angular-intro.min.js"></script>

加载模块

加载模块。

angular.module('MyApp', ["angular-intro"])

表示内容的设定

可以用两种主要的方法来展示。

    • HTML属性で設定

 

    javascript objectで設定

无论使用哪种方法，以下的ng-intro-method和ng-intro-options设置都是必需的。

<div ng-intro-method="showHelp" ng-intro-options="option"></div>

ng-intro-method是调用intro.js启动时的方法名。
该方法是由angular-intro.js设置的，所以即使没有在angularjs的控制器中设置ng-intro-method中的方法也可以。

ng-intro-options是调用intro.js后用来设置工具提示等显示顺序和内容的对象的对象名称属性。
写在这里的对象名称将被设置到$scope中。
虽然在特定的控制器中没有必要特别设置它，但如果要使用上述的javascript对象来进行设置，就需要将值赋给这个对象。

使用HTML属性进行配置。

如果要在HTML属性中进行设置，则需要在要显示工具提示的标签上添加data-intro属性和data-step属性。

<div data-intro="ツールチップに表示されるテキスト" data-step="何番目に表示するかの数値"></div>

请参考intro.js官方网站，了解更多关于这些配置和其他可用属性的信息。

用JavaScript对象进行设置。

如果在 JavaScript 对象中进行设置，就需要在控制器中将显示内容添加到 $scope 中。
在这种情况下，要设置给 $scope 的变量名应与 ng-intro-options 中设置的名称相同。

$scope.option = 
  steps:[
     {
       element: '#step1'
       intro: "First tooltip"
     }
     {
       element: '#step4'
       intro: "Second tooltip"
       position: 'right'
     }
  ]

开动

要显示这个工具提示，需要调用使用ng-intro-method设置的方法名的方法。
看起来这个方法似乎是由angular-intro创建的，所以在控制器中不需要特别设置。

可以随意制作按钮或图标，并通过ng-click调用。

<button value="Show Help" ng-click="showHelp()"></button>

这就是完成了。

bannerAds