65.9K
CodeProject 正在变化。 阅读更多。
Home

学习 AngularJS - 第 3 集（共 15 集）

Abhishek Maitrey
starIconstarIconstarIconstarIconstarIcon

5.00/5 (8投票s)

2015年5月9日

CPOL

2分钟阅读

viewsIcon

18151

downloadIcon

130

学习 AngularJS 的第三部分

回顾第 1 集：点击这里

回顾第 2 集： 点击这里

引言

我们将在这篇文章中涵盖以下主题

  • AngularJs 指令
  • 内置指令
  • 一些指令的例子
  • 创建指令
  • AngularJs 自定义指令
  • 创建自定义指令

AngularJs 指令

  • 核心 AngularJs 功能 / JavaScript 函数
  • 当 DOM 被 AngularJs 框架编译时调用
  • 通过添加属性来扩展 HTML（特定于应用程序）
  • 用于开发自定义元素（特定于应用程序）或
  • 通过允许开发人员构建自定义树节点来使 HTML DOM 更加灵活
  • 简化文档对象模型 (DOM) 操作
  • 控制 AngularJs 应用程序中的 HTML 渲染
  • 它告诉如何将数据混入 HTML 模板（数据绑定）
  • 可以实现指令为
    • 元素指令（推荐）
    • 属性指令（推荐）
    • CSS 类指令（避免直到必要时）
    • 注释指令（避免直到必要时）

内置指令

AngularJs 框架提供了各种内置指令。内置指令以 "ng-" 为前缀。

一些最常用的内置指令是

ng-app AngularJs 应用程序的根元素。自动启动应用程序。
ng-init 初始化应用程序数据并计算表达式
ng-model 将视图绑定到模型
ng-controller 将控制器类附加到视图
ng-repeat 迭代集合并为每次迭代实例化模板
ng-bind 将给定表达式的值绑定到指定的 HTML 元素
ng-bind-template 绑定 {{多个}} {{给定}} {{表达式}} 的值
ng-show, ng-hide 根据给定的表达式显示或隐藏 HTML 元素
ng-click 用于指定单击元素时的自定义行为
ng-non-bindable 忽略绑定表达式

常用指令示例

我使用 Visual Studio Code 作为编辑器，AngularJs v1.3.15 作为 Angular 框架。

我从源代码中选取了一些代码片段，并突出显示 了指令。

<htmlng-app="appModule">
<buttonng-click="rating=rating+2;"ng-init="1">Give Rating</button>
<label>Hide Educational Information? 
<inputtype="checkbox"ng-model="HideEduInfo"/></label>

<label>Show Other Staff Details?
<inputtype="checkbox"ng-model="ShowOtherStaff"/></label>
<divng-controller="personalInfoController">
<spanng-non-bindable><strong>{{Email}}</strong></span>
<divng-controller="educationInfoController"ng-hide="HideEduInfo">

我们为什么要创建新的指令？

以便开发人员可以修改元素的现有行为，使用适当的语义构建更复杂的组件，或用于封装逻辑并简化 DOM 操作。 请参阅上面的定义部分。

如果您熟悉如何创建 angularjs 控制器，那么工作就完成了一半。 创建指令与创建控制器非常相似。

语法

最低要求

module.directive("directiveName", function() {
return{
};
});

我的自定义指令

在 Episode3.html 中有一个类似的例子，其中没有使用自定义指令。 我使用我自己的指令准备了同样的例子。 我们开始吧…

appModule.directive("ratingdirective", function() {
return{
template: "<span> Hey Reader! This is my custom directive.</span>"+
"<span> Do you like it?</span><br />"+
"<button ng-click='customrating=customrating+1;' ng-init='1'>
Give Rating</button>"+
"<span>Your rating count is {{customrating}}</span><br />"
};
});

'restrict' 属性的重要性

限制 值 如何使用？

Attribute

A

用作任何容器元素的属性 [默认 并推荐]

<div yourDirectiveName>

元素

E

用作独立的、用户定义的元素 [推荐]

<yourDirectiveName>

类

C

用作任何容器元素中的 CSS 类名 [不推荐]

<div class=" yourDirectiveName ">

注释

M

用作 HTML 注释 [不推荐]

<!-- yourDirectiveName -->

如果您的所需 HTML 模板代码在另一个 .html 文件中是隔离的，则可以使用 templateUrl 属性分配该文件的 URL。

文件名：customdirective.js

appModule.directive("mydirective", function() {
return{
restrict:'AE', //this can be used as attribute and independent element only
templateUrl:'rating.html' //this file is available separately
};
?});

文件名：rating.html

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<span>Hey Reader! This is my custom directive.</span>
<span>Do you like it?</span><br/>
<buttonng-click='customrating=customrating+1;'ng-init='1'>Give Rating</button>
<span>Your rating count is {{customrating}}</span><br/>
</body>
?</html>

我相信这足以启动指令。 虽然它有很多范围，但可以通过实践来学习。

学习愉快...

第 4 集：AngularJs 服务（即将推出）

© . All rights reserved.