AngularJS学习笔记

最新推荐文章于 2022-12-09 16:14:24 发布

hcy48

最新推荐文章于 2022-12-09 16:14:24 发布

阅读量405

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 javascript

本文链接：https://blog.youkuaiyun.com/hcy48/article/details/71854545

javascript 同时被 2 个专栏收录

10 篇文章

订阅专栏

前端

5 篇文章

订阅专栏

本文介绍了AngularJS中的关键指令，包括ng-app、ng-model、ng-bind等，并解释了它们的作用及用法。此外还探讨了自定义指令的不同调用方式及其限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>