Angularjs 常用指令

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。您将使用一个控制器或模块来代替它。

<div ng-init="myText='Hello World!'">

 

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 ng-class="{true: 'active', false:'inactive'}[isActive]">

 

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