angular ng指令-白红宇

angular ng指令

阅读量：4983 次

发布时间：2019-06-12

本文共 2317 字，大约阅读时间需要 7 分钟。

1.指令

ng-app,ng- 都是angular的指令系统

ng-app: ng-app是angular的初始化，一个页面只能有一个ng-app,位置不限制。在页面上加入了这个执行，那么从当前的元素以及儿子元素，都交给angular管理，不赋值的话，会有一个默认模块。

ng-app="myApp"这里如果加了自定义的名字，那么必须创建对应的模块。

ng-model:双向绑定数据

ng-init：给字段赋予初始值。ng-init=”val=0”。

ng-bind:单向绑定，只能用于双标签，如果要在单标签上使用，那么我们就使用表达式，表达式有一个闪烁的问题，它渲染在html的双标签位置。与{

{}}的作用一样显示数据。

写法有：ng-bind data-ng-bind x-ng-bind

{

{表达式}}：用于显示数据。

一次性数据绑定：{

{::表达式}}

ng-controller控制器，链接数据的的桥梁

ng-bind

ng-cloak

ng-bind-template

ng-bind-html

http://www.bootcdn.cn/angular.js/

不同于以上的功能性指令，Angular还定义了一些用于和事件绑定的指令：

- ng-blur：失去焦点

- ng-change：发生改变

- ng-copy：拷贝完成

- ng-click：单击

- ng-dblclick：双击

- ng-focus：得到焦点

- ng-submit：

ng-click/dblclick

ng-mousedown/up

ng-mouseenter/leave

ng-mousemove/over/out

ng-keydown/up/press

ng-focus/blur

ng-submit

2.指令闪烁 ng-cloak

解决表达式闪烁的问题

1. Class=”ng-cloak”

2.在对应的标签中加上 ng-cloak指令即可。

虽然ng-bind 能解决 {

{}} 闪现的问题，但是 ng-bind不能用单标签 ng-bind 只能用于双标签，在单标签上是无法解决

在单标签上，为了解决闪现表达的可以使用 ng-cloak,也可以在表标签上加上 class="ng-cloak"

3.ng-class ng-class-even ng-class-odd

ng-class 实现多个选择多个 {"red":true,"font":true}

如果值为True表示可用，否则false 不可以用

ng-class {"A":red,"B":green}[A] 多选择一个样式

{
   {x.title}}

$scope.data=[ {title:"标题", main:"a"}, {title:"标题1", main:"b"}, {title:"标题2", main:"c"} ];

4.ng-repeat 指令

js控制器里定义一个data数据：

angular.module("myApp",[]).controller("testContoller",function($scope){    $scope.data=[        {title:"标题", main:"主要内容"},        {title:"标题1", main:"主要内容1"},        {title:"标题2", main:"主要内容2"}        ]});

第一种使用：

{
   {a.title}},{
   {a.main}}

第二种使用：

如果使用ng-repeat-start那么必须要结合ng-repeat-end


     
{
   {o.title}}


         
      {
   {obj.name}}

$even：奇数行$even的值为true，偶数行为false;

$odd：奇数行$odd的值为false，偶数行为true;

5.ng-show ng-hide

ng-show ：默认值是隐藏;布尔值为true时显示

ng-hide:默认值是显示；布尔值为true时隐藏

6.ng-if

ng-if:值为true的时候显示，为false时该元素及其所有子元素被移除；默认为false。

测试盒子

2222 11111

7.ng-switch


         
      
      
    
      {
   {data.names}}    
      {
   {data.namess}}
     
$scope.data={   name:"",    names:"张三",    namess:"小明"}

8.ng-checked

9.ng-include

语法


     ng-include 指令作为元素使用:

所有的 HTML 元素都支持该指令。

参数值

值	描述
filename	文件名，可以使用表达式来返回文件名。
onload	可选，文件载入后执行的表达式。
autoscroll	可选，包含的部分是否在指定视图上可滚动。