企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[TOC] ## 第九章 内置指令 ### 9.1 基础 ng 属性指令 * ng-href * ng-src * ng-disabled * ng-checked * ng-readonly * ng-selected * ng-class * ng-style #### 9.1.1 布尔属性 ##### 1. ng-disabled 可以绑定到以下表单 * &lt;input&gt; (text, checkbox, radio, number, url, email, submit) * &lt;textarea&gt; * &lt;select&gt; * &lt;button&gt; ```html <textarea ng-disabled="true|false">Wait5seconds</textarea> ``` ##### 2. ng-readonly ```html <input type="text" ng-readonly="someProperty" value="Some text here"/> ``` ##### 3. ng-checked ```html <input type="checkbox" ng-checked="someProperty" ng-model="someProperty"> ``` ##### 4. ng-selected ```html <select name="gender"> <option value="male" ng-selected="gender == 'male'">男</option> <option value="female" ng-selected="gender == 'female'">女</option> </select> ``` #### 9.1.2 类布尔属性 ##### 1. ng-href 当使用当前作用域中的属性动态创建URL时,应该用ng-href代替href。 ```html <a ng-href="{{ myHref }}">click</a> ``` ##### 2. ng-src AngularJS会告诉浏览器在ng-src对应的表达式生效之前不要加载图像 ```html <img ng-src="{{ myHref }}" /> ``` #### 9.2.1 在指令中使用子作用域 ##### 1. ng-app ##### 2. ng-controller ##### 3. ng-include (P82)   使用 `ng-include` 可以 **加载**、**编译** 并 **包含** 外部HTML片段到当前的应用中。模板的URL被限制在与应用文档相同的域和协议下。   使用 `ng-include` 时AngularJS会 **自动创建一个子作用域**。如果你想使用某个特定的作用域,例如 `MyController` 的作用域,必须在同一个 DOM 元素上添加 `ng-controller ="MyController"`指令,这样当模板加载完成后,不会像往常一样从外部作用域继承并创建一个新的子作用域。 ```html <div ng-include="/myTemplateName.html" ng-controller="MyController" ng-init="name = 'World'"> Hello {{ name }} </div> ``` ##### 4. ng-switch ```html <input type="text" ng-model="person.name"/> <div ng-switch on="person.name"> <p ng-switch-default>And the winner is</p> <h1 ng-switch-when="Ari">{{ person.name }}</h1> </div> ``` ##### 5. ng-view `ng-view` 指令用来设置将被路由管理和放置在HTML中的视图的位置。 ##### 6. ng-if 根据表达式的值在DOM中 **生成** 或 **移除** 一个元素。 `ng-if` 同 `no-show` 和 `ng-hide` 指令最本质的区别是,它不是通过CSS **显示** 或 **隐藏** DOM节点,而是真正生成或移除节点。 ```html <div ng-if="2+2===5"> Won't see this DOM node, not even in the source code </div> <div ng-if="2+2===4"> Hi, I do exist </div> ``` ##### 7. ng-repeat `ng-repeat` 用来遍历一个集合或为集合中的每个元素生成一个模板实例。 * $index:遍历的进度(0 ~ length-1)。 * $first:当元素是遍历的第一个时值为 `true`。 * $middle:当元素处于第一个和最后元素之间时值为 `true`。 * $last:当元素是遍历的最后一个时值为 `true`。 * $even:当$index值是偶数时值为 `true`。 * $odd:当$index值是奇数时值为 `true`。 ```html <ul ng-controller="PeopleController"> <li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}"> {{person.name}} lives in {{person.city}} </li> </ul> ``` ```javascript angular.module('myApp',[]) .controller('PeopleController',function($scope) { $scope.people = [ {name: "Ari", city: "San Francisco"}, {name: "Erik", city: "Seattle"} ]; }); ``` ##### 8. ng-init ng-init指令用来在指令被调用时设置内部作用域的初始状态。 ```html <div ng-init="greeting='Hello';person='World'"> {{greeting}} {{person}} </div> ``` ##### 9. {{ }} 内置的模板语法, 实际上它是`ng-bind`的简略形式. ```html <p>{{greeting}}</p> ``` > 在屏幕可视的区域内使用 `{{ }}` 会导致页面加载时未渲染的元素发生 **闪烁**,用 `ng-bind` 可以避免这个问题。 ##### 10. ng-bind ```html <p ng-bind="greeting"></p> ``` ##### 11. ng-bind-template `ng-bind-template`用来在视图中绑定多个表达式。 ```html <p ng-bind-template="{{lastName}}{{firstName}}"></p> ``` ##### 12. ng-cloak `ng-cloak` 指令会将内部元素隐藏,直到路由调用对应的页面时才显示出来。 ```html <body ng-init="greeting='HelloWorld'"> <p ng-cloak>{{ greeting }}</p> <p>{{greeting}}</p> </body> ``` ##### 13. ng-model `ng-model` 指令用来将 `input` 、`select`、`textarea` 或自定义表单控件同包含它们的作用域中的属性进行绑定。它可以提供并处理表单验证功能。 如果属性并不存在,它会隐式创建并将其添加到当前作用域中。 ```html <input type="text" ng-model="modelName.someProperty"/> ``` ##### 14. ng-show / ng-hide `ng-show` 和 `ng-hide` 根据所给表达式的值(布尔值)来显示或隐藏HTML元素。 ```html <div ng-show="2 + 2 == 5"> 2 + 2 isn't 5, don't show </div> ``` ##### 15. ng-change 这个指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入,这个指令要和 `ngModel` **联合使用**。 ```html <input type="text" ng-model="user.age" ng-change="change()"/> <code>{{ user.length_of_service }}</code> ``` ##### 16. ng-form `ng-form` 用来在一个表单内部嵌套另一个表单。这意味着内部所有的子表单都合法时,外部的表单才会合法。 Angular不会将表单提交到服务器,除非它指定了 `action` 属性。要指定提交表单时调用哪个JavaScript方法,使用下面 **两个指令中的一个**。 * ng-submit:在表单元素上使用。 * ng-click:在第一个按钮或submit类型(input[type=submit])的输入字段上使用。 ```html <style> input.ng-invalid { border: 1px solid red; } input.ng-valid { border: 1px solid green; } </style> <form name="signup_form" ng-controller="FormController" ng-submit="submitForm()" novalidate> <div ng-repeat="field in fields" ng-form="signup_form_input"> <input type="text" name="dynamic_input" placeholder="{{field.placeholder}}" ng-required="field.isRequired" ng-model="field.name"/> <div ng-show="signup_form_input.dynamic_input.$dirty && signup_form_input.dynamic_input.$invalid"> <span class="error" ng-show="signup_form_input.dynamic_input.$error.required"> The field is required. </span> </div> </div> <button type="submit" ng-disabled="signup_form.$invalid">Submit All</button> </form> ``` ```javascript angular.module('myApp',[]) .controller('FormController',function($scope) { $scope.fields = [ {placeholder: 'Username', isRequired: true}, {placeholder: 'Password', isRequired: true}, {placeholder: 'Email (optional)', isRequired: false} ]; $scope.submitForm = function() { alert("it works!"); }; }); ``` ##### 17. ng-click P88