Angularjs 常用指令

待我称王封你为后i 2022-05-21 04:50 274阅读 0赞

ng指令太多了，参考官网：https://docs.angularjs.org/api/ng/directive

常用的：

**ng-app** 指令定义一个 AngularJS 应用程序。（如果移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果）

**ng-app** 指令在网页加载完毕时会**自动引导**（自动初始化）应用程序。

**ng-model** 指令把**元素值（比如输入域的值）绑定到应用程序**。ng-model 指令可以为**应用数据提供状态值**(invalid,dirty, touched, error)

**ng-bind** 指令把应用程序数据绑定到 HTML 视图。

**ng-init** 指令初始化 AngularJS 应用程序变量。使用ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。

通常情况下，不使用ng-init。您将使用一个控制器或模块来代替它。

**ng-repeat** 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。

可以使用 **.directive** 函数来添加**自定义的指令**。

示例：

angular.module('myApp',[]).directive('first',[function(){
        return{
            //scope: false, // 默认值，共享父级作用域
            //controller: function($scope, $element, $attrs, $transclude) {},
            restrict:'AE',// E = Element, A = Attribute,C = Class, M = Comment
            template:'firstname:{
       {name}}',
        };
    }]).directive('second',[function(){
        return{
            scope:true,// 继承父级作用域并创建指令自己的作用域
            //controller: function($scope, $element, $attrs, $transclude) {},
            restrict:'AE',// E = Element, A = Attribute,C = Class, M = Comment  
    
            //当修改这里的name时，second会在自己的作用域中新建一个name变量，与父级作用域中的
            //name相对独立，所以再修改父级中的name对second中的name就不会有影响了
            template:'secondname:{
       {name}}',
        };
    }]).directive('third',[function(){
        return{
            scope:{},// 创建指令自己的独立作用域，与父级毫无关系
            //controller: function($scope, $element, $attrs, $transclude) {},
            restrict:'AE',// E = Element, A = Attribute,C = Class, M = Comment
            template:'thirdname:{
       {name}}',
        };
    }])
    .controller('DirectiveController',['$scope',function($scope){
        $scope.name="mike";
    }]);

**ng-show** 指令隐藏或显示一个HTML 元素。（属性返回 true 的情况下显示）

**ng-hide**  指令用于隐藏或显示 HTML 元素。

**ng-controller** 指令定义了应用程序控制器。

**ng-option** 指令来创建一个下拉列表，列表项通过对象和数组循环输出。（**ng-repeat** 指令是通过数组来循环 HTML 代码来创建下拉列表，但 **ng-options** 指令更适合创建下拉列表）

**ng-repeat** 有局限性，选择的值是一个字符串；使用 **ng-options** 指令，选择的值是一个对象：<trng-repeat="value in tableData track by $index">

**ng-class** 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

ng-class 指令的值可以是字符串，对象，或一个数组。

如果是字符串，多个类名使用空格分隔。

如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。

如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

**<div class="step-text"ng-class="\{'red-border': $Page.requirementDescription=='' \}">**

**ng-class-odd** 指令用于为 HTML 元素动态的绑定一个或多个 CSS 类，但只作用于奇数行。

ng-class-odd 指令需要与 ng-repeat 指令搭配使用。

<tr ng-repeat="x inrecords" ng-class-odd="'striped'">

**ng-style** 指令为 HTML 元素添加 style 属性。

**ng-style** 属性值必须是对象，表达式返回的也是对象。

对象由 CSS 属性和值注册，即 key=>value 对。

<div ng-style="\{display:$first?'block':'none'\}">

**ng-disabled** 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。

如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用

**ng-click** 指令定义了 AngularJS 点击事件。

**ng-include** 指令用于包含外部的 HTML 文件。

包含的内容将作为指定元素的子节点。

ng-include 属性的值可以是一个表达式，返回一个文件名。

默认情况下，包含的文件需要包含在同一个域名下。

1.ng-include的外部html缓存加载，第一次从服务器加载，第二次从缓存加载

2.好像没有提供自定义控制缓存的接口

**ng-cloak** 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。

**ng-if** 指令用于在表达式为 false 时移除 HTML 元素。

如果 if 语句执行的结果为 true，会添加移除元素，并显示。

**ng-if** 指令不同于 ng-hide， ng-hide 隐藏元素，而 **ng-if** 是从 DOM 中移除元素。

EX : ng-if="currentItem=='CPU'"

**ng-checked** 用于：

<tr ng-repeat="value in $scope.combineTableData track by $index" ng-click="$scope.changeCurrent($index);">
    <td style="width:140px;text-align:center;">
        <input type="checkbox" ng-checked="$index==$scope.selectedIndex" ng-show="value.showCheckBox" />
    </td>
    <td>{
       {value.name}}</td>
    </tr>