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, 即可以通过元素名和属性名来调用指令
posted @ 2016-02-29 19:53  地狱猫  阅读(150)  评论(0编辑  收藏  举报