AngularJs 指令
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-repeat 指令会重复一个 HTML 元素:
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性
ng-show 指令隐藏或显示一个 HTML 元素。<p ng-show="hour > 12">我是可见的。</p>
ng-hide 指令用于隐藏或显示 HTML 元素。
ng-include 指令来包含 HTML 内容:<div ng-include="'myUsers_List.htm'"></div>
- 自定义的指令你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令,HTMl 元素上需要添加自定义指令名。使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:<body ng-app="myApp">
- <runoob-directive></runoob-directive>
- <script>
- var app = angular.module("myApp", []);
- app.directive("runoobDirective", function() {
- return {
- template : "<h1>自定义指令!</h1>"
- };
- });
- </script>
- </body>你可以通过以下方式来调用指令:
- 元素名<runoob-directive></runoob-directive>
- 属性<div runoob-directive></div>
- 类名<div class="runoob-directive"></div>
- 注释<!-- 指令: runoob-directive —>限制使用
-
var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict : "A", template : "<h1>自定义指令!</h1>" }; });
- restrict 值可以是以下几种:
- E 只限元素名使用
- A 只限属性使用
- C 只限类名使用
- M 只限注释使用
- restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令