首页 > 代码库 > Angular内置指令（二）

Angular内置指令（二）

2024-08-21 13:52:40   219人阅读

目录：

$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>

Angular内置指令（二）


联系
我们