AngularJS内置指令详解与示例

152 浏览量更新于2024-08-31 收藏 87KB PDF 举报

"AngularJS内置指令" AngularJS是一个强大的前端JavaScript框架，它的核心特性之一就是指令系统。指令使得我们可以扩展HTML，赋予其动态行为和数据绑定功能。本文将深入讲解一些AngularJS内置指令，并探讨它们在实际开发中的应用。首先，`ng-app`指令是每个AngularJS应用的起点，用于标记HTML文档中的根元素，告诉AngularJS在这个区域内启动应用程序。例如，`<html ng-app="myApp">`表明整个HTML文档属于名为"myApp"的应用。`ng-app`同时也创建了一个作用域，即 `$rootScope`，它是所有其他作用域的父级，可以用来共享全局变量。不过，为了保持代码的整洁和可维护性，不推荐过度使用 `$rootScope`。接着，`ng-model`指令用于将HTML表单控件与AngularJS的数据模型进行双向绑定。这意味着，当用户在表单中输入数据时，模型的值会同步更新；反之，当模型的值改变时，表单控件的显示也会相应更新。例如，`<input type="text" ng-model="someModel.someProperty">`将输入框的值与`someModel`对象的`someProperty`属性绑定。 `ng-init`指令则用于初始化作用域内的变量。在简单的示例或演示中，可能会用到它来快速设置初始值，如`<div ng-init="job='fighter'">I’ma/an {{job}}</div>`。然而，通常不推荐在生产环境中广泛使用`ng-init`，因为这可能导致代码难以理解和维护。更好的做法是在控制器中初始化数据。 `ng-controller`指令用于定义控制器，它是AngularJS中处理业务逻辑的地方。通过`ng-controller`，我们可以创建一个新的作用域，并在这个作用域内定义方法和属性。控制器可以通过注入服务、执行初始化操作等来管理应用的状态。例如，`<div ng-controller="MyController">`会创建一个新作用域，并关联到名为"MyController"的控制器。除了以上几个常用指令，AngularJS还有许多其他内置指令，如`ng-repeat`用于循环渲染列表，`ng-if`和`ng-show/hide`用于条件性地显示或隐藏元素，`ng-click`用于响应点击事件等。这些指令极大地丰富了HTML的表现力，使得开发者能更高效地构建动态Web应用。了解并熟练掌握AngularJS的内置指令是提升开发效率的关键。在实际项目中，应根据需求合理选用指令，遵循最佳实践，以实现高效、可维护的代码。同时，随着AngularJS的版本更新，某些指令可能有所变化，因此保持对最新技术动态的关注也是十分必要的。

AngularJS内置指令内置指令

指令，我将其理解为AngularJS操作HTML element的一种途径。

由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点，所以指令早已不陌生。

这篇日志简单记录了一些内置指令，先使用起来，再谈一些有趣的东西。

内置指令内置指令

所有的内置指令的前缀都为ng，不建议自定义指令使用该前缀，以免冲突。

首先从一些常见的内置指令开始。

先列出一些关键的内置指令，顺便简单说说作用域的问题。

ng-model

将表单控件和当前作用域的属性进行绑定，这么解释似乎也不太正确。

但先不要管咬文嚼字，用起来倒是易懂，例如:

代码如下:

ng-init

该指令被调用时会初始化内部作用域。

这个指令一般会出现在比较小的应用中，比如给个demo什么的…

代码如下:

I’m a/an {{job}}

</div>

除了ng-init，我们还有更多更好的选择。

ng-app

每一次用AngularJS都离不开这个指令，顺便说下$rootScope。

声明了ng-app的元素会成为$rootScope的起点，而$rootScope是作用域链的根，通常声明在<html>你懂的。

也就是说根下的作用域都可以访问它。

但是，不建议过度使用$rootScope，免得全局变量满天飞，效率又差又难管。

下面是一个例子:

代码如下:

<body>

</body>

var myApp = angular.module(‘myApp’, [])

.run(function($rootScope) {

$rootScope.someProperty = ‘hello computer’;

});

</script>

</html>

ng-controller

我们用这个指令在一个DOM元素上装上controller。

一个控制器? 确实，从字面意思上这样理解倒是不错，那我们为什么需要控制器?

记得AngularJS 1.2.x时还可以这样定义controller来着…

代码如下:

function ohMyController($scope) {

//…

}

AngularJS 1.3.x中禁止了这种方式，因为这种方式会让controller满天飞，分不清层次，所有东西都挂在$rootScope上…

ng-controller必须有一个表达式作为参数，另外通过$scope来继承上级$scope的方法和属性什么的，$rootScope也包括在

内。

下面只是一个简单的例子，ancestor无法访问child的作用域。

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38637884

粉丝: 6
资源: 869

AngularJS内置指令详解与示例

浅入angularjs指令

AngularJS实用开发技巧(推荐)

AngularJS封装指令方法详解

nb-stopwatch:AngularJS 秒表指令

Angularjs使用指令做表单校验的方法

Directives-Workshop:使用 AngularJS 进行指令实践

AngularJS自定义指令详解（有分页插件代码）

Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法

AngularJS 指令详细介绍

精通AngularJS：指令篇

最新资源