2.angular指令

发布于：2025-03-13 ⋅ 阅读:(13) ⋅ 点赞:(0)

初级使用可以查看视频
参考手册
注意

  • 像ng-class,ng-value,ng-href等这些，很多都可以直接用class=“{{}}” 原生写，为啥还出这些指令，是因为原生的比如刚一进页面就先出现表达式了，浏览器走到这里的时候才去解析，给用户的体验不好

ng-app

  • angular只对这个标签以内的起作用，要不就直接原生解析
  • 告诉angular核心它管理当前标签所包含的整个区域,有自动创建$rootScope(根作用域对象),如果是可以ng-app = “*” 就是模块名 ,就是那个.module('')

ng-controller=“*”,

  • 新创建一个新的作用域,然后自动new构造函数就是.controller里面名字,(name, [ s c o p e , f u n c t i o n ( scope, function( scope,function(scope) {}]),
  • 用数组的原因,是这个$scope不可以变名字,但是压缩后的代码一般都会形参变成a,b,c,d这种,所以用数组这种传,
  • 可以使用as用来面向对象,其实就是相当于new的实例可以使用原型链上的方法或属性，面向对象

ng-repeat:

遍历,里面可以用$index, $first(第一项), $middle(除了第一和最后), $last(最后一项), $odd, $even / ng-repeat-start ng-repeat-end 可以用来嵌套
先来个完整的：后面只是使用的例子

ng-init 初始化数据 ng-init=“username=‘zjap’”, 一般也不会用,但是比如嵌套循环的时候可能会用到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active1 {
            background: red
        }
        .active2 {
            background: green
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <ul>
        <!-- 隔行换色 -->
        <li ng-repeat="data in dataList" class="{{$odd? 'active1': 'active2'}}">{{data}}{{$odd}}</li>
    </ul>

    <table border="1">
      <!-- 这种相当于嵌套的<template v-for似的，ng-show让其隐藏要不可能影响合并> -->
        <tr ng-show="false" ng-repeat-start="data in twoTableLitst track by $index" ng-init="outIndex=$index"></tr>
          <tr ng-repeat="chil in data.children track by $index" ng-init="inIndex=$index">
            <td ng-if="inIndex == 0" rowspan="{{data.children.length}}">{{ data.name }}</td>
            <td>{{ chil }}</td>
          </tr>
        <tr ng-show="false" ng-repeat-end></tr>
    </table>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', function($scope) {
            $scope.dataList = ['aaa', 'bbb', 'ccc', 'ddd']
            $scope.twoTableLitst = [
                {name: 'aaa', children: ['11', '22']},
                {name: 'bbb', children: ['11', '22']},
            ]
        }])
    </script>
</body>
</html>

<body ng-app="myApp" ng-controller="Aaa as a1">
    <span>{{a1.text}}</span>
    <script src="./public/angular.js"></script>
    <script> 
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', FnAaa])
        function FnAaa($scope) {
        }
        FnAaa.prototype.text="woshi"
    </script>
</body>

ng-class:动态class

ng-style: 动态style

ng-href href

ng-src

ng-attr-**这个基本其他所有的属性都可以使用，因为不可能原生的都有对应的ng-属性，所以咱们就是所有属性都可以用这个eg：title

ng-disabled --$interval 不可点击

ng-readonly 只读

ng-checked 複選框选中

ng-value 输入框等的值

也可以用value=“{{}}”,但是这个体验不好,用户可能先在页面看到{{}},后期才能看到内容,所以推荐ng-value

<body ng-app="myApp" ng-controller="Aaa">
    <span ng-class="{active: IsDisabled}" ng-style="{color: 'yellow'}">{{ text }}</span>
    <span ng-style="ngStyle">{{ text }}</span>
    <span ng-class="ngClass">{{ text }}</span>
    <a ng-href="{{ngHerf}}" ng-attr-title="{{ text }}">qubaidu</a>
    <input type="button" ng-value="text" ng-disabled="IsDisabled">
    <input type="text" ng-value="text" ng-readonly="IsDisabled">
    <input type="checkbox" ng-checked="IsDisabled">
    <script src="./public/angular.js"></script>
    <script> 
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', '$interval', function($scope, $interval) {
            // setInterval --$scope.apply()
            let iNow = 5
            $scope.text = iNow + '秒'
            $scope.IsDisabled = true
            $scope.ngStyle={
                background: 'yellow',
                color: 'red'
            }
            $scope.ngClass = {
                active: true
            }
            $scope.ngHerf = "http://www.baidu.com"
            const timer = $interval(function() {
                iNow--
                $scope.text = iNow + '秒'
                if (iNow === 0) {
                    $interval.cancel(timer)
                    $scope.IsDisabled = false
                }
            }, 1000)
        }])
    </script>
</body>

ng-bind

解决{{}}闪屏问题,因为{{}} 当时浏览器不知道,到下面看到angular,再上去解析这种就会闪屏,跟ng-value似的

ng-cloak

这个就是比如用户就想用{{}}不想用ng-bind,但是想让{{}}解析出来才展示,平常时候就是display:none

ng-bind-template

这个就是比如标签中内容多个{{}},肯定用ng-bind不合适,所以就使用这个

ng-bind-html

这个就是解析成html,但是因为这个功能不常用,所以angular就设置成一个插件形式,后期需要按照模块引入就行,从这里查:https://www.bootcdn.cn/angular.js/,下面代码其实是有问题的,可能是引入的库不对,后面研究,但是写法基本是这种

ng-non-bindable // 就比如说想让{{}}展示出来，不去解析

<body ng-app="myApp" ng-controller="Aaa">
    <span ng-bind="text"></span>
    <span ng-cloak>{{ text }}</span>
    <span ng-bind-template="{{ text }}, {{text}}"></span>
    <div ng-bind-html="htmlstr"></div>
    <span ng-non-bindable>{{ text }}</span>
    <script src="./public/angular.js"></script>
    <script src="https://cdn.staticfile.org/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>
    <script>
        // alert('1')
        var m1 = angular.module('myApp', ['ngSanitize'])
        m1.controller('Aaa', ['$scope', function($scope) {
            $scope.text = 'nihao'
            $scope.htmlstr = '<h1>1111</h1>'
        }])
    </script>
</body>

ng-show,ng-hide 显示隐藏，就是css的disable的切换

ng-if dom元素显示

ng-switch

ng-open 应用于details,默认是展开还是隐藏

<body ng-app="myApp" ng-controller="Aaa">
    <input type="button" value="点击" ng-click="checkButton()">
    <span v-if="isShow">展示</span>
    <div ng-switch on="lalal">
        <p ng-switch-when="1">我是1</p>
        <p ng-switch-when="2">我是2</p>
        <p ng-switch-default>我是其他</p>
    </div>

    <details ng-open="isShow">
        <summary>我是总体</summary>
        <p>我是介绍</p>
    </details>
    <script src="./public/angular.js"></script>
    <script> 
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', function($scope) {
            $scope.isShow = true
            $scope.lalal = 1
            $scope.checkButton = function() {
                $scope.isShow = !$scope.isShow
                $scope.lalal++
            }
        }])
    </script>
</body>

ng-model: 跟v-model似的,双向数据绑定,但是如果比如想不时实的去更改可以使用ng-model-options和updateOn去配置

ng-include 可以引入新的html,这个在这个上面写也是报错,目前不知道到为啥

—我知道为啥了，需要放到服务器上，不是本地浏览器打开

<body ng-app="myApp" ng-controller="Aaa">
    <!-- 但是不起作用，不知道为啥 -->
    <div ng-include="'moni.html'"></div>
    <!-- 不时实,失去焦点才变 -->
    <input type="text" ng-model="text" ng-model-options="{updateOn: 'blur'}">
    <span>{{text}}</span>
    <script src="./public/angular.js"></script>
    <script> 
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', function($scope) {
            $scope.text = "我是开始"
        }])
    </script>
</body>
</html>

事件

ng-mouseenter,ng-mouseleave 移入移出

ng-click/dbclick 点击

ng-selected //下拉菜单选中

ng-change // input change事件

ng-copy ng-cut ng-paste 输入框复制,j剪切,粘贴操作

其他原生事件都可以用ng-事件名

标签指令

<a> 普通的a标签会点击刷新页面有默认行为，angluar重新封装了下，没有默认行为了

select

-- ng-options

form

-- novalidate

<body>
    <div ng-app="myApp" ng-controller="Aaa">
        <!-- 默认行为点击 -->
        <a href="">{{myColor}}</a>
        <!-- myColor是color对象,color.name是展示的 -->
        <select ng-options="color.name for color in colors" ng-model="myColor"></select>
        <!-- 如果不写novalidate会有默认表单样式,比如说输入不是email,就会有红色边框,这没模拟出来 -->
        <form novalidate>
            <input type="email">
        </form>
    </div>
    <a href="">aaaaaaaaaaaa</a>
    <script src="./public/angular.js"></script>
    <script> 
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', function($scope) {
            $scope.colors = [{name: 'red'}, {name: 'yellow'}]
            $scope.myColor = ''
        }])
    </script>
</body>

这些结合表单验证更容易理解，看3文档

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布