您的位置：首页 > Web前端 > AngularJS

AngularJS学习笔记

2017-05-13 17:47 351 查看

1.指令

（1）ng-init 指令初始化 AngularJS 应用程序变量。不常用

HTML5 允许自定义属性以 data- 开头。而AngularJS 属性以 ng- 开头，所以可以使用 data-ng- 来让网页对 HTML5 有效。

（2）ng-app 指令定义一个 AngularJS 应用程序。一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

（3）ng-model 指令把元素值（比如输入域的值）绑定到应用程序。能够同步数据。

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

（4）ng-bind 指令把应用程序数据绑定到 HTML 视图。

（5）ng-repeat会重复一个 HTML 元素，类似for循环，可用于数组或对象。

用法：

ng-repeat=“x in arrs”

（6）.directive 自定义指令。可以元素名、属性、类名、注释形式调用

<body ng-app="myApp">

<!--用分隔符-来调用-->
<runoob-directive></runoob-directive>  <!--元素名-->
<div runoob-directive></div>   <!--属性-->

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
//驼峰命名
return {
template : "<h1>自定义指令!</h1>"
};
});//使用驼峰法来命名一个指令，但在使用它时需要以-分割
</script>
</body>

<body ng-app="myApp">
<div class="runoob-directive"></div>   <!--类名-->

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "C", //必须设置restrict的值为 "C" 才能通过类名来调用指令
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>

<body ng-app="myApp">

<!-- directive: runoob-directive -->    <!--注释-->

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "M", //必须设置restrict的值为 "M"
replace : true, //需要在该实例添加 replace 属性
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>

上面四种调用方式效果均是下图：

restrict 限制使用，有如下值:

E 作为元素名使用

A 作为属性使用

C 作为类名使用

M 作为注释使用

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

（7）ng-show ng-show 属性返回 true 的情况下显示内容

<span ng-show="var">xxxx</span>

2.表达式

{{ expression }}，可以包含文字、运算符和变量。功能与与ng-bind相似。

AngularJS 表达式可以写在 HTML 中。

AngularJS 表达式不支持条件判断，循环及异常。

AngularJS 表达式支持过滤器。

{{ quantity * cost }}
与
<span ng-bind="quantity * cost"></span>

3.应用

AngularJS 模块（Module）定义了 AngularJS 应用。

AngularJS 控制器（Controller）用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。

<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航