AngularJS（三）——指令实战及自定义指令

来源：互联网发布：知乎回答过于频繁编辑：程序博客网时间：2024/05/29 17:15

前言

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

内容

指令实战

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

需要的指令有：

ng-app、ng-model、ng-bind、n-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>

小结

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

感谢您的宝贵时间···

0 1