4

对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】

 2 years ago
source link: https://blog.51cto.com/u_15603561/5639316
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Angularjs表达式

对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】_应用程序

Angularjs使用表达式将数据绑定到HTML
Angularjs表达式使用双括号编写：｛表达式｝。
angularjs表达式将数据绑定到HTML，类似于ng bind指令。
Angularjs将在写入表达式的位置“输出”数据。
Angularjs表达式与JavaScript表达式非常相似：它们可以包含文本、运算符和变量。
实例｛5+5｝或｛firstname+“”+LastName｝｝

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app>
<p>黎燃表达式{{ 5 + 5 }}</p>
</div>

</body>
</html>
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】_自定义指令_02

Angularjs数字类似于JavaScript数字：

<div ng-app="" ng-init="quantity=1;cost=5">
 
<p>总价： {{ quantity * cost }}</p>
 
</div>
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】_应用程序_03

使用相同的NG bind实例：

<div ng-app="" ng-init="quantity=1;cost=5">
 
<p>总价： <span ng-bind="quantity * cost"></span></p>
 
</div>

Angularjs表达式和JavaScript表达式

与JavaScript表达式类似，angularjs表达式可以包含字母、运算符和变量。
与JavaScript表达式不同，angularjs表达式可以用HTML编写。
与JavaScript表达式不同，angularjs表达式不支持条件判断、循环和异常。
与JavaScript表达式不同，angularjs表达式支持过滤器。

Angularjs指令

Angularjs使用称为指令的新属性扩展HTML。
Angularjs通过内置指令向应用程序添加函数。
Angularjs允许自定义指令。
angularjs指令是一个扩展的HTML属性，前缀为ng-。
ng app指令初始化angularjs应用程序。
ng init指令初始化应用程序数据。
ng模型指令将元素值（例如输入字段的值）绑定到应用程序。

<div ng-app="" ng-init="firstName='John'">
 
     <p>在输入框中尝试输入：</p>
     <p>姓名：<input type="text" ng-model="firstName"></p>
     <p>你输入的为： {{ firstName }}</p>
 
</div>
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】_html_04

ng-app指令告诉angularjs＜div＞元素是angularjs应用程序的“所有者”。
数据绑定
上面示例中的{firstname}表达式是angularjs数据绑定表达式。
angularjs中的数据绑定将angularjs表达式与angularjs数据同步。
｛｛firstname｝｝通过ng model=“firstname”同步。
在下一个示例中，两个文本字段由两个ng模型指令同步：

<div ng-app="" ng-init="quantity=1;price=5">
 
<h2 id="h0">价格计算器</h2>
 
数量： <input type="number"    ng-model="quantity">
价格： <input type="number" ng-model="price">
 
<p><b>总价：</b> {{ quantity * price }}</p>
 
</div>
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】_html_05

ng-repeat 指令用在一个对象数组上：

Ng应用程序指令

ng app指令定义angularjs应用程序的根元素。
加载网页时，ng app指令将自动引导（自动初始化）应用程序。
稍后，将了解ng app如何通过值（例如ng app=“mymodule”）连接到代码模块。

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
 
<p>循环对象：</p>
<ul>
  <li ng-repeat="x    in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
 
</div>

Ng初始化指令

ng init指令定义angularjs应用程序的初始值。
通常，不使用ng init。将用控制器或模块替换它。

Ng模型教学

ng模型指令将HTML元素绑定到应用程序数据。
ng模型指令还可以：
为应用程序数据（数字、电子邮件、必填项）提供类型验证。
为应用程序数据提供状态（无效、脏、触摸、错误）。
为HTML元素提供CSS类。
将HTML元素绑定到HTML表单。

Ng重复指令

ng repeat指令为集合（数组）中的每个项克隆一次HTML元素。

创建自定义指令

除了angularjs的内置指令外，我们还可以创建自定义指令。
可以使用。用于添加自定义指令的指令函数。
要调用自定义指令，需要向HTML元素添加自定义指令名称。
驼峰方法用于将指令命名为runoobdirective，但在使用它时需要将其拆分为“-”。Runoob指令：

<body ng-app="myApp">

<runoob-directive></runoob-directive>

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

</body>
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】_自定义指令_06

可以通过以下方式调用指令：
素名
属性
类名
笔记 

<runoob-directive></runoob-directive>

<div runoob-directive></div>

<div class="runoob-directive"></div>

<!-- directive: runoob-directive -->

通过添加restrict属性并将值设置为“a”，可以设置指令只能通过属性调用：

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "自定义指令!"
    };
});

极限值可以是以下值：
E用作元素名称
A用作属性
C用作类名
M用作注释
restrict的默认值是ea，也就是说，可以通过元素名和属性名调用指令。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK