Angular内置指令(二)

目录:

$rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init

ng-show/ng-hide,ng-model,ng-bind-template,ng-change,ng-submit,ng-cloak,ng-bind

详细介绍:

$rootScope

是作用域链的起始点,任何嵌套在ng-app内的指令都会继承$rootScope

ng-app

任何具有ng-app属性的dom元素都将被标记为$rootScope的起始点

.run()

.run()可以通过此方法来访问/设置$rootScope

ng-include

把外部的html片段包含到当前元素里作为当前元素的子元素。还可以规定作用域,写法看下面代码,注意外部文件地址的引号的写法,跨域的文件不可以引入哦

<body>
<!--注意外部文件地址的引号-->
<div ng-include="‘htmlhtml.html‘"
     ng-controller="myController"
     ng-init="name=‘world‘"
        >
</div>

<script>
    angular.module("myApp",[])
            .controller("myController",function($scope){

            })
</script>
</body>

ng-repeat

用来遍历数组或者对象。

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../../Angular/angular.min.js"></script>
    <style>
        .odd{
            background:greenyellow;
        }
        .even{
            background:grey;
        }
    </style>
</head>
<body>

<div ng-controller="myController">
    <table width="100%"border="0">
        <!-- 注意添加class的两个引号-->
        <tr ng-repeat="v in objData" ng-class-even="‘even‘" ng-class-odd="‘odd‘">
            <td>{{v.name}}</td>
            <td>{{v.age}}</td>
            <td>{{v.score}}</td>
        </tr>
    </table>
    <ul>
        <!-- 被遍历的数组有重复元素,是不会被遍历出来的,下面的写法是根据下标遍历数组,所以重复的就会被遍历出来-->
        <li ng-repeat="v in arr track by $index">{{v}}</li>
    </ul>
</div>

<script>
    angular.module("myApp",[])
            .controller("myController",function($scope){
                $scope.objData = [
                    {name:‘小梦‘,age:‘19‘,score:‘104‘},
                    {name:‘北京‘,age:‘20‘,score:‘103‘},
                    {name:‘山西‘,age:‘12‘,score:‘102‘},
                    {name:‘天安门‘,age:‘21‘,score:‘101‘}
                ];
                $scope.arr = [1,3,2,1,1,2,3,4]
            })
</script>
</body>
</html>

ng-if

可以完全根据表达式返回的布尔值在dom中生成或移除一个元素,false移除,true生成。移除的时候不管对该元素做过什么设置,当再次生成的时候这些设置都不在了,就像恢复了出厂设置一样。

<body>

<!--这个div会被移除-->
<div ng-if="2+2 == 5">
    我是给ng-if返回false的div
</div>

<div ng-if="2+2 == 4">
    我是给ng-if返回true的div
</div>

<script>
    angular.module("myApp",[])
</script>
</body>

ng-switch

ng-switch ng-switch-when ng-switch-default就像switch语句一样使用

<body>
<div>
    <input type="text" ng-model="person.name"/>
    <!-- on 就好像是switch语句的参数一样  而ng-switch-when 就像是 case一样 -->
    <div ng-switch on="person.name">
        <p ng-switch-default>default</p>
        <p ng-switch-when="Air">{{person.name}}</p>
    </div>
</div>
<script>
    angular.module("myApp",[])
</script>

ng-init

设置内部作用域的初始值。

<body>
<div ng-init="name=‘大厨的笔记‘;age=‘25‘">
    <p>{{name}}{{age}}岁啦</p>
</div>
<script>
    angular.module("myApp",[])
</script>
</body>

ng-show/ng-hide

根据条件返回的布尔值 显示或隐藏元素

<body>
  <div ng-show="2+2 == 4">
      第一个div  2+2 == 4 ng-show
  </div>
  <div ng-hide="2+2 == 4">
      第二个div 2+2 == 4  ng-hide
  </div>
<script>
    angular.module("myApp",[])
</script>

ng-model

用来将input select textarea 或自定义表单控件同包含它们的作用域中的属性进行绑定

<body>
<!--双向数据绑定,视图与控制器的数据保持一致-->
<div ng-controller="myController">
    <input type="text" ng-model="data"/>
    <p>{{data}}</p>
</div>

<script>
    angular.module("myApp",[])
            .controller("myController",function($scope){
                $scope.data = 1;
            })
</script>

ng-change

在表单输入发生变化时触发。要配合ng-model使用

<body>
<div ng-controller="myController">
    <input type="text" ng-model="data.mo" ng-change="change()"/>
    <p>{{data.child}}</p>
</div>

<script>
    angular.module("myApp",[])
            .controller("myController",function($scope){
                $scope.data = {};
                $scope.change = function(){
                    $scope.data.child = parseInt($scope.data.mo)+2;
                }
            })
</script>
</body>

ng-submit

用来将表达式同onsubmit事件进行绑定,这个指令会阻止默认发送请求,前提是form没有action属性

ng-bind

在使用 {{ }} 绑定数据时在数据没有加载出来时会发生闪烁的现象,使用ng-bind来绑定数据不会出现闪烁的问题

<!--这样不会有闪烁的现象-->
<div ng-controller="myController">
    <div ng-bind="data"></div>
</div>
<script>
    angular.module("myApp",[])
            .controller("myController",function($scope){
                    $scope.data = ‘大厨的笔记‘;
            })
</script>

ng-cloak

除了用ng-bind来解决闪烁问题外,还可以用ng-cloak来解决,它会将内部元素隐藏,直到数据出来后才显示内部元素

<body>
<div ng-controller="myController">
    <p ng-cloak>{{data}}</p>
</div>
<script>
    angular.module("myApp",[])
            .controller("myController",function($scope){
                $scope.data = ‘大厨的笔记‘;
            })
</script>
</body>

ng-bind-template

同ng-bind指令类似,用来在视图中绑定多个表达式

<body>
<!--貌似这种写法在个别编辑器里会报错,但是不影响数据渲染-->
<div ng-controller="myController">
    <p ng-bind-template="{{data1}}{{data2}}"></p>
</div>

<script>
    angular.module("myApp",[])
            .controller("myController",function($scope){
                $scope.data1 = ‘大厨的笔记1‘;
                $scope.data2 = ‘大厨的笔记2‘;
            })
</script>
</body>
时间: 2024-10-14 16:42:20

Angular内置指令(二)的相关文章

Angular内置指令

以ng前缀开头的都是内置指令,因此不要以ng开头命名自定义指令.此外还有其他内置指令在标签中不易发现,如<a>和<form>. 一,布尔属性 1  ng-disabled 可以在input,textarea,select,button绑定 例一:按钮一直禁用,直到用户在文本字段中输入内容 <input type="text" ng-model="someProperty" placeholder="TypetoEnable&q

AngularJS 内置指令(二)

下面将要介绍的指令会以父级作用域为原型生成子作用域.这种继承的机制可以创建一个隔 离层,用来将需要协同工作的方法和数据模型对象放置在一起. ng-app 和ng-controller是特殊的指令,因为它们会修改嵌套在它们内部的指令的作用域. ng-app 为AngularJS应用创建$rootScope,ng-controller则会以$rootScope或另外一个 ng-controller 的作用域为原型创建新的子作用域. 1. 子作用域: <!doctype html> <html

Angular内置指令(一)

要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突  目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng-class,ng-style ng-disabled 当它的值返回true时表示禁用当前元素,返回false时什么都不做 <body> <!--在文本框输入内容时禁用按钮--> <input type="text" ng-model="name&qu

Angular——内置指令

内置指令 ng-app 指定应用根元素,至少有一个元素指定了此属性. ng-controller 指定控制器 ng-show控制元素是否显示,true显示.false不显示 ng-hide控制元素是否隐藏,true隐藏.false不隐藏 ng-if控制元素是否"存在",true存在.false不存在 ng-src增强图片路径 ng-href增强地址 ng-class控制类名 ng-include引入模板 ng-disabled表单禁用 ng-readonly表单只读 ng-checke

Angular中的内置指令和自定义指令

NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减少DOM操作,实现数据绑定,与业务逻辑进行交互. How: 指令主要分为两种:内置指令和自定义指令,通过下面的例子,简单记录一下如何去使用. 内置指令 在官方API文档上罗列了很多指令,内置指令可以分为:普通指令 和 事件指令,他们都是作用于HTML之上的,通过添加属性的方式来实现的.简单看一下一些

angular内置过滤器-filter

这篇文章来讲解一下angular内置的filter过滤器. 没错,这个过滤器的名字,就叫'filter',虽然自定义过滤器也是使用module.filter()...但是不要混淆了,这个filter就是过滤器的名字~ 这个过滤器是干嘛的呢? 它的作用是: '从数组中过滤出需要的项,放入新的数组并返回这个新数组.' 一.用在html模板里: 因为是用来过滤数组,所以这个过滤器基本上都用在ng-repeat指令上,比如: <div ng-repeat="list in lists | filt

AngularJS内置指令集合

ng-model 将表单控件和当前作用域的属性进行绑定 代码如下: <input type="text" ng-model="someModel.someProperty" /><br>{{someModel.someProperty}} ng-init 该指令被调用时会初始化内部作用域.这个指令一般会出现在比较小的应用中,比如给个demo什么的... 代码如下: <div ng-init="job='fighter'&quo

Angular2 内置指令 NgFor 和 NgIf 详解

http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个可以运行起来的Angular2的样例程序,最好就是我们上一章节中完成的那个QuickStart小项目或者你自己根据官网上面的步骤完成的QuickStart小项目,因为我们的讲解都是在那个基础上来进行的;然后让我们开始下面的快乐旅程吧. 因为我们的这一系列的文章都是使用的Typescript所以在看下

AngularJS内置指令

内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突.首先从一些常见的内置指令开始.先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确.但先不要管咬文嚼字,用起来倒是易懂,例如: 代码如下: <input type="text" ng-model="someModel.someProperty" /><br>{{someModel.som