AngularJS(三)——指令实战及自定义指令

前言

    上篇介绍了一些指令的应用,本篇介绍一些常用的用法格式。

内容

指令实战

下面通过输入一个名字实现实时更新文本内容。

    需要的指令有:

    ng-appng-modelng-bindn-init

Demo

要引用的文件(这里第一次出现以后,后面引用的都是这个文件,以后不再重复)

 

<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>

Body部分

 

<body>

<div ng-app="" ng-init="firstName='zhou'">
<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>
<p ng-bind='firstName'></p>
</div>

</body>

实现的效果:

 

该例子解析:

    ng-app:该指令告诉AngularJS<div>元素是AngularJS应用程序的所有者,在网页加载完毕时会自动引导(自动初始化)应用程序);

    ng-model:该指令绑定HTML元素到应用程序数据;

    ng-bind:绑定要运算的要显示的内容数据,用于显示通过绑定HTML元素到应用程序的数据;

    ng-init:该指令为AngularJS应用程序的定义了初始值;

创建自定义指令

    使用.directive函数来添加自定义的指令,使用驼峰法来命名一个指令,runoobDirective,但在使用它的时候需要以“-”分割,runoob-directive;举例说明:


<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
//自定义指令部分
var app = angular.module("myApp", []); //
app.directive("runoobDirective", function() {
    return {
        template : "<h1>快来看,这就是自定义指令!</h1>"
    };
});
</script>
</body>

小结

    本篇大概说了指令的应用格式以及怎么创建自定义指令。

 

感谢您的宝贵时间···

posted @ 2016-10-14 09:06  小小小同  阅读(155)  评论(0编辑  收藏  举报