AngularJS指令

来源：互联网发布：视频剪辑软件哪个好编辑：程序博客网时间：2024/06/05 19:24

经过AngularJS的入门之旅后，产生很大的兴趣，今天我们就来聊聊AngularJS的指令，也会有很多的惊喜来等着我们发现.......

AngularJS的指令有很多我们先聊聊几个重要的指令吧！！！

1.ng-app指令

用于启动AngularJS应用程序,根模块：通过ng-app的属性值来指定【指定的是名称】--指定了一个myApp的模块

<html ng-app="myApp">

注：一定要记得引入AngularJS框架哦！！！

<script src="js/lib/AngularJS/angular.min.js"></script>

2.ng-controller指令

通过ng-controller来将控制器和对应的标签绑定，定义好了控制器的作用范围【开始标签~结束标签之间】

<div ng-controller="myCtrl" ng-init="count=1">   .....</div>

3.ng-init指令

ng-init这个东西，主要用来在标签中初始化一些变量数据【不推荐】

<div ng-controller="myCtrl" ng-init="count=1"></div>

4.ng-module指令

将数据动态的双向绑定，即在表单里输入内容，在页面上显示的内容会随之输入框中内容的改变而改变

例如：

<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="js/lib/AngularJS/angular.min.js"></script></head><body>    <div ng-controller="myCtrl">        <input type="text" ng-model="hello">        {{hello}}    </div>    <script>        var app = angular.module("myApp",[]);        app.controller("myCtrl", function($scope){            $scope.hello = "hello angularjs! 今天开始学习js高级开发的部分"        });    </script></body></html>

通过ng-model指令降自定义的$scope.hello内容与input里的内容动态的绑定，当你改变input你的内容时，在页面渲染出的{{hello}}的内容也会随之改变。

ng-model 指令也可以：

为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

5.ng-click指令

ng-click指令允许您指定自定义行为当一个元素被点击。

<button ng-click="click()"></button>

给button绑定一个点击事件，等你点击吃按钮是才能触发事件。

6.ng-repeat指令

每个模板实例都得到它自己的作用域，其中给定的循环变量设置为当前集合项，并且将$索引设置为项索引或键。

通常与ul,li,table结合使用。

例如：

<!--html代码-->

<!doctype html><html ng-app="myApp"><head><meta charset="utf-8"><title>无标题文档</title><link rel="stylesheet" href="js/bootstrap.min.css"><script src="js/angular.min.js"></script></head><body><div class="container" ng-controller="myCtrl"><div class="row"><div class="col-md-8 col-md-offset-2"><div class="page-header"><h2>我的购物车</h2></div></div></div><div class="row"><div class="col-md-8 col-md-offset-2"><table class="table table-hover table-striped"><tr><th>#</th><th>商品名称</th><th>商品单价</th><th>购买数量</th><th>小计金额</th><th>操作</th></tr><tr ng-repeat="g in goodses"><td><span ng-bind="g.goodsID"></span></td><td><span ng-bind="g.goodsName"></span></td><td>￥<span ng-bind="g.goodsPrice"></span></td><td><input type="text" ng-model="g.count"></td><td>￥<span ng-bind="g.goodsPrice * g.count"></span></td><td><a href="#">删除</a></td></tr><tr><td>总计金额：<span ng-bind="total"></span></td></tr></table></div></div></div>

<!--js代码-->

<script>var app = angular.module("myApp", []);app.controller("myCtrl", function($scope) {$scope.goodses = [/*后端接口返回的json数据*/{goodsID:1, goodsName:"商品A", goodsPrice:12, count:1, subtotal:12},{goodsID:2, goodsName:"商品B", goodsPrice:32, count:1, subtotal:32},{goodsID:3, goodsName:"商品C", goodsPrice:56, count:1, subtotal:56}];$scope.$watch("goodses", function() {$scope.total = 0;/*总计金额*/for(var i = 0; i < $scope.goodses.length; i++) {$scope.total += $scope.goodses[i].goodsPrice * $scope.goodses[i].count;}}, true);});</script></body></html>

在页面中显示的效果为：

：

如你看到的图片的效果一样，我们通过ng-reap指令把购物车里的商品循环的输出渲染到页面中，这样大大的减少了我们html里的代码量。

7.ng-style指令

可以修改css样式

html代码：

<input type="button" value="set color" ng-click="myStyle={color:'red'}"><input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}"><input type="button" value="clear" ng-click="myStyle={}"><br/><span ng-style="myStyle">Sample Text</span><pre>myStyle={{myStyle}}</pre>

js代码：

var colorSpan = element(by.css('span'));it('should check ng-style', function() {  expect(colorSpan.getCssValue('color')).toBe('rgba(0, 0, 0, 1)');  element(by.css('input[value=\'set color\']')).click();  expect(colorSpan.getCssValue('color')).toBe('rgba(255, 0, 0, 1)');  element(by.css('input[value=clear]')).click();  expect(colorSpan.getCssValue('color')).toBe('rgba(0, 0, 0, 1)');});

css代码：

span {  color: black;}

在页面中显示的效果：

可以设置多个css样式，通过点击按钮来改变样式，更加的方便。

如果你对AngularJS指令还有兴趣，还想了解更多的指令，请看AngularJS官方网站看更多的指令：

https://code.angularjs.org/1.6.4/docs/api/ng/directive/ngStyle

0 0