Angular 指令详解-优快云博客

本文链接：https://blog.youkuaiyun.com/boonyaxnn/article/details/90451375

本文介绍了Angular的一些核心指令，包括ng-app用于定义应用范围，ng-model实现双向数据绑定，ng-repeat用于遍历数据，ng-if和ng-show/hide控制元素显示，ng-class用于动态添加样式，还涉及到ng-controller、ng-event等其他指令的使用。

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

1.ng-app 边界指令：规定了使用angular使用范围；在这个ng-app的范围里面可以使用angular语法
ng-app 不赋值
ng-app='myApp'（ang创建模块的时候限制边界，使用）
创建angular模块 ng-app='名称' 一般都要名字

<html lang="en" ng-app='myApp'>//赋值
<html lang="en" ng-app>//不赋值

2.{{}} 表达式变量函数() 简单的运算
AngularJS 表达式写在双大括号内：{{ expression }}
作用：显示数据把数据显示到视图上面

<h2>{{1+2}}</h2>

3.ng-model:内置指令：用在input 双向数据绑定，可以获取input里面输入的内容 textarea
ng-model='msg' 把用户输入的信息数据存储在msg变量上；

 <input type="text" ng-model='msg' ng-init='msg="hello world"'>
  <!-- 展示数据同步 -->
 <p ng-bind='msg'></p>

4.ng-init:初始化数据
说明：ng-init='msg="hello world"'

<div ng-init='mm="期待改变数据"'>
        {{mm}}
</div>

5.ng-bind 和{{ }} 显示数据
{{}} 没有引入angular会显示{{}}
ng-bind：如果angular没有加载的时候，什什么都不不显示

6.ng-controller=‘名字’

angular设计模式：mvc

m：model 模型数据

v: view 视图页面（html）

c： controller 控制器控制视图和模型数据

PS：页面里面可以有多个控制器；每个控制器作用域在当前控制器里面；

app.controller('控制器名字',['$scope','$rootScope',function($scope){
    //$scope.是angular里面给我们提供的对象  内置服务
    //$scope 连接数据和视口
}])

7.ng-repeat='' 遍历数据

说明：ng-repeat='变量名 in 数组' 遍历数组每一列的值给变量名

$index 获取当前列的下标---（重点）

$first 判断是否是第一元素

$last 判断是否是最后一元素

ps：

一般是取到数组时，采取页面遍历；

遍历数组不允许有重复的信息；

如果有，添加标识 track by $index；

 <li ng-repeat='item in arrList track by $index'>{{item}}{{$index}}</li>

8. ng-if /ng-else ng-if=true 显示内容 false隐藏
9. ng-show='boolean' true 显示 false 不显示        是否显示
10.ng-hide='boolean' true 不显示 false 显示         是否隐藏
     ng-if=''true 显示 false 不显示    是否显示

   可以存变量也可以存Boolean表达式；
     区别：
      ng-show /ng-hide 控制css的display：none显示隐藏的
      ng-if/ng-else 控制dom元素是否存在

  <div ng-show='flag'>show</div>
  <div ng-hide='flag'>hide</div>
  <div ng-if='flag'>if</div>

  <script>
      var app=angular.module('app',[]);
        //控制器
      app.controller('mainctrl',['$scope',function($scope){
            //控制flag 显示隐藏
            // $scope.flag=true;
            $scope.flag=false;
      }])    
        
 </script>

11、事件
ng-事件名='函数名（）'
ng-click='' ng-mouseenter=''....

       绑定事件
                作用：给元素绑定指定的事件
                语法：<E ng-事件类型='函数调用()'></E>
                说明：1.事件类型就是js中的事件类型
                    2.事件可以指定函数调用，也可以写表达式
                    3.事件对象是$event
                    4.函数调用时可以传递实参

 <button ng-click='demo()'>点我试试</button>
     <button ng-mouseenter='enter()'>鼠标移入</button>
    <script>
        var app=angular.module('app',[]);
        //控制器
        app.controller('mainctrl',['$scope',function($scope){
               //事件 --方法
               $scope.demo=function(){
                   console.log('出来了');
               };
               $scope.enter=function(){
                   console.log('鼠标出来了');
               }
        }])           
    </script>

12.定义控制器(作用域)
作用：把页面分割成不同的作用域
语法：模型.controller('名称',function($scope){

             })
            说明：1.controller是模型上的一个方法
                       2.参数1，是控制器名称，名称不能重复
                 3.参数2，有两种写法
                     第一种：直接写一个函数
                   第二种：以数组形式写，数组中最后一项是函数，函数前面的数组项是需要依赖注入的服务。
                            还有一个功能是防止代码压缩时把依赖注入的服务名称改变了，在真实项目开发时使用第二种数组形式的写法。模型.controller('名称',['$scope',function($s){}])
                      4.$scope,在当前作用域下注入局部的作用域对象，在当前作用域下所有angular管理的变量、方法都必须定义在$scope上

    <!-- 第一个控制器 -->
    <div ng-controller='div1'>
        <h2>{{share}}</h2>
        {{div1}}
    </div> 
    <hr>
    <!-- 第二个控制器 -->
    <div ng-controller='div2'>
            {{div2}}
            <h2>{{share}}</h2>
    </div>

    <script>
        //模型：
        var app=angular.module('app',[]);
        //$scope 作用域范围：当前的控制器里面 局部范围
        //$rootScope 根控制器 作用域范围是全局的 
        //第一个控制器
        app.controller('div1',['$scope','$rootScope',function($scope,$rootScope){
            $scope.div1='我是第一个控制器盒子';
            //公共的属性 方法
            $rootScope.share='公共的数据 都可以调用';
        }])

         //第二个控制器
         app.controller('div2',['$scope',function($scope){
            $scope.div2='我是第二个控制器盒子';
        }])        
    </script>

13. ng-class=''
添加样式（ul隔行换色）

        <ul>
            <li ng-repeat='item in arr' ng-class='{pink:$index%2==0}'>
                {{item}} {{$index}}
                <!-- <button ng-show='$index%2==0'>删除</button> -->
                <button ng-click='del($index)'>删除</button>
            </li>
        </ul>

  var app=angular.module('app',[]);
        app.controller('main',['$scope',function($scope){
            //  $scope.flag=false;
            //案例
            $scope.arr=['吃吃','喝喝','睡睡','玩玩','豆豆'];
            //删除
            $scope.del=function(a){//a形参
                //this
                // console.log(a);
                this.arr.splice(a,1);
            }
        }])

Angular 指令初始