AngularJS 指令

AngularJS 通过被称为 指令 的新属性来扩展 HTML。并且通过内置的指令来为应用添加功能。另外,AngularJS 允许我们自定义指令。
AngularJS为我们提供了很多指令,在前面我们也见到了一些,如:ng-app、’ng-bind’等。AngularJS提供的指令我们可以查阅官网的文档,这里就不一一列举了,下面介绍几个比较常用的指令的用法,其他指令的使用也大同小异。
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。

ng-app 指令

在之前的代码中,我们可以发现每一个AngularJS的代码里都含有ng-app指令。ng-app 指令定义了 AngularJS 应用程序的 根元素。在网页加载完毕时会自动引导(自动初始化)应用程序。

ng-init 指令

ng-init 指令为 AngularJS 应用程序定义了 初始值。通常情况下,我们不使用 ng-init。我们将使用一个控制器或模块来代替它。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="" ng-init="color=['red', 'blue', 'green']">
        <div>
            {{color[1]}}
        </div>
    </body>

</html>

这是之前的一个示例,使用ng-init指令初始化了一个名为color的数组。

ng-model 指令

ng-model 指令 绑定 HTML 元素 到应用程序数据。另外ng-model 指令也可以:

  • 为应用程序数据提供类型验证(number、email、required)。
  • 为应用程序数据提供状态(invalid、dirty、touched、error)。
  • 为 HTML 元素提供 CSS 类。
  • 绑定 HTML 元素到 HTML 表单。
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="">
        <div>
            <input type="text" ng-model="msg" />
        </div>
        <div>
            {{msg}}
        </div>
    </body>
</html>

ng-repeat 指令

ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="" ng-init="color=['red', 'blue', 'green']">
        <div>
            <ul>
                <li ng-repeat="x in color">{{x}}</li>
            </ul>
        </div>
    </body>
</html>

自定义的指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令。
我们可以使用 .directive 函数来添加自定义的指令。要调用自定义指令,HTMl 元素上需要添加自定义指令名。我们需要使用驼峰法来命名一个指令, 例如:myDirective, 但在使用它时需要以 - 分割, my-directive

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="myApp">

        <my-directive></my-directive>

        <script>
            var app = angular.module("myApp", []);
            app.directive("myDirective", function() {
                return {
                    template: "<h1>自定义指令!</h1>"
                };
            });
        </script>

    </body>

</html>

我们可以通过元素名、属性、类名、注释来调用指令。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>

    <body ng-app="myApp">

        <my-directive></my-directive>
        <div my-directive></div>
        <div class="my-directive"></div>
        <!-- directive: my-directive -->

        <script>
            var app = angular.module("myApp", []);
            app.directive("myDirective", function() {
                return {
                    restrict : "EACM",
                    replace : true,//
                    template: "<h1>自定义指令!</h1>"
                };
            });
        </script>

    </body>

</html>

限制使用

我们可以限制我们的指令只能通过特定的方式来调用。通过添加 restrict 属性来限制,例如:设置restrict值为 “A”, 则指令只能通过属性的方式来调用。

restrict 值可以是以下几种:

  • E 只限元素名使用
  • A 只限属性使用
  • C 只限类名使用
  • M 只限注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

时间: 2024-09-22 02:04:24

AngularJS 指令的相关文章

3个可以改善用户体验的AngularJS指令介绍

  这篇文章主要介绍了3个可以改善用户体验的AngularJS指令,AngularJS是一款具有很高人气的JavaScript框架,需要的朋友可以参考下 1.头像图片 为了在你的应用中展示头像图片,你需要使用用户的电子邮件地址,将地址转换为小写并使用md5加密该字符串.所以聪明的做法是使用指令来做到这些,并且可以复用. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29   /* * A

基于jQuery UI Autocomplete的AngularJS 指令(directive)扩展

      在前几篇随笔简单介绍了AngularJS,在AngularJS 指令(directive)是重要的概念,主要负责了很大部分的组建样式交互.在前面介绍过directive需要预先的模板编译在返回一个link的函数,注册行为事件交互等等.在这里不多说了,关于指令的介绍将在后续一并补上.在这里我们先看一个利用jQuery UI组件开发的AngularJS Autocomplete指令. 代码:jsfiddle在线测试 Directive:    1 var oldSuggest = jQu

angularJS学习笔记:创建自定义angularJS指令基础篇

AngularJS提供了很多指令可以帮助我们操作DOM.处理事件.数据绑定.绑定控制器与作用域(ngView)等等.例如ngClick.ngShow.ngHide.ngRepeat以及其它很多AngularJS核心的指令都可以帮助我们很轻松的使用这个框架. 虽然内置的指令已经覆盖了大部分的使用场景,但在实际使用中为了简化操作或组件重用等我们经常需要创建自己的指令.在这个系列的文章中我将一步步带你了解AngularJS指令是如何工作的,以及如何开始使用/创建它们. 在这个系列的文章中我们假定你已经

浅谈AngularJs指令之scope属性详解_AngularJS

AngularJS使用directive()方法类定义一个指令: .directive("name",function(){ return{ }; }) 上面是定义一个指令的主体框架,该方法接受两个参数: 1.第一个参数:name表示定义的指令的名称(angularjs会用这个name注册这个指令) 2.第二个参数:函数,该番薯必须返回一个对象或者一个函数,但通常我们会返回一个对象.return后接的就是返回的对象. 在返回的对象中有一个scope属性,这个属性用来修饰指令的作用域.

AngularJS 指令详细介绍_基础知识

AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令. AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. 完整的指令内容可以参阅 AngularJS 参考

AngularJS指令与指令之间的交互功能示例_AngularJS

本文实例讲述了AngularJS指令与指令之间的交互功能.分享给大家供大家参考,具体如下: 前面一篇文章<AngularJS指令与控制器之间的交互功能示例>我们了解了指令与控制器之间的交互,接下来看看指令与指令之间是如何进行交互的. 1.首先来了解一下什么是独立scope 为了更好的理解独立scope,我们来看一段代码: <div ng-controller="myController1"> <hello></hello> <hel

AngularJS指令与控制器之间的交互功能示例_AngularJS

本文实例讲述了AngularJS指令与控制器之间的交互功能.分享给大家供大家参考,具体如下: 本节我们来看控制器与指令之间的交互 1.首先来看最简单的,在指令中调用父控制器的方法: <div ng-controller="myController1"> </div> app.controller('myController1',['$scope',function($scope){ $scope.load=function(){ console.log('正在加

AngularJS入门教程之AngularJS指令_AngularJS

熟悉HTML的朋友都知道,HTML有很多属性.比如<a>标签的href属性可以来指定链接的URL地址,<input>标签的type属性可以用来指定input的类型.AngularJS指令就是通过扩展HTML的属性来为 AngularJS应用增加功能. AngularJS指令用于扩展HTML.这些都是先从ng- 前缀的特殊属性.我们将讨论以下指令: 常用AngularJS指令 ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng

AngularJS指令中的绑定策略实例分析_AngularJS

本文实例讲述了AngularJS指令中的绑定策略.分享给大家供大家参考,具体如下: 在前面的文章中,我们知道了指令如何生成独立的scope,这一节中我们来仔细研究一下scope中的绑定策略. 总体来说scope的绑定策略分为3种: (1)@ : 绑定字符串 (2)=: 与父控制器进行双向绑定 (3)&:用于调用父scope中的函数 1.基础方式 <test word="{{wordCtrl}}"></test> app.controller('myCon

AngularJS指令详解及示例代码_AngularJS

AngularJS指令用于扩展HTML.这些都是先从ng- 前缀的特殊属性.我们将讨论以下指令: ng-app - 该指令启动一个AngularJS应用. ng-init - 该指令初始化应用程序数据. ng-model - 此指令定义的模型,该模型是变量在AngularJS使用. ng-repeat - 该指令将重复集合中的每个项目的HTML元素. ng-app指令 ng-app 指令启动一个AngularJS应用.它定义根元素.它会自动初始化或启动加载包含AngularJS应用程序的Web页