angularJS内置指令一览

Posted on 2015-09-24 15:49 晚睡早起阅读(262) 评论(0) 编辑收藏举报

基础ng指令

ng-href
ng-src
ng-disabled
ng-readonly
ng-checked
ng-selected
ng-class
ng-style
ng-show
ng-hide
ng-repeat
ng-init
ng-if
ng-bind
ng-bind-template
ng-cloak
ng-model
ng-click
ng-change
ng-submit
ng-include

内置指令说明

a.ng-href
  使用说明: 当使用当前作用域中的属性动态创建URL时,应该用ng-href代替href。
         解决潜在问题当用户点击一个由插值动态生成的链接时,如果插值尚未生效,将会跳转 到错误的页面(通常是404)

b.ng-src
  使用说明: angularJS会告诉浏览器在ng-src对应的表达式生效之前不要加载图像
            <img ng-src="{{ imgsrc }}" />

c.ng-disabled
  使用说明: 使用ng-disabled可以把disabled属性绑定到以下表单输入字段上:
           <input> (text、checkbox、radio、number、url, email、submit)
           <textarea>
           <select>
           <button>
           <textarea ng-disabled="isDisabled"></textarea>

d.ng-readonly
  使用说明: 通过ng-readonly可以将某个返回真或假的表达式同是否出现readonly属性进行绑定
           <input type="text" ng-readonly="someProperty" />

e.ng-checked
  使用说明: 通过ng-checked可以将某个返回真或假的表达式同是否出现checked属性进行绑定
           <input type="checkbox" ng-checked="someProperty" />

f.ng-selected
  使用说明: ng-selected可以对是否出现option标签的selected属性进行绑定
           <select>
              <option>加入黑名单</option>
              <option ng-selected="currentID == 2">取消黑名单</option>
           </select>

g.ng-class
  使用说明: ng-class 动态设置元素的类,方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。
          当表达式发生变化,先前添加的类会被移除,新类会被添加
          <div ng-class="{error : iserror}"></div>
          <div ng-class="{success : hasValue, error : !hasValue}"></div>

h.ng-style
  使用说明: ng-style帮你轻松控制你的css属性
          <div ng-style="{coloe : 'red'}"></div>
          <div ng-style="style"></div>
          $scope.style = {color:'red',cursor:'pointer'};

i.ng-show/ng-hide
  使用说明: ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏。
          类似地,当赋值给ng-hide指令的值为true时元素也会被隐藏
          <div ng-show="2+2==6"></div>
          <div ng-hide="2+2==4"></div>

j.ng-repeat
  使用说明: ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素 都会被赋予自己的模板和作用域。
           同时每个模板实例的作用域中都会暴露一些特殊的属性
           $index:遍历的进度(0...length-1)
           $first:当元素是遍历的第一个时值为true
           $middle:当元素处于第一个和最后元素之间时值为true
           $last:当元素是遍历的最后一个时值为true
           $even:当$index值是偶数时值为true
           $odd:当$index值是奇数时值为true

          下面的例子展示了如何用$odd和$even来制作相间的列表，JavaScript中数组 的索引从0开始,
          因此我们用!$even和!$odd来将$even和$odd的布尔值反转：

<ul ng-controller="PeopleController">
                <li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">
                     {{person.name}} lives in {{person.city}}
                 </li>
         </ul>
         angular.module('freefedApp',[]).controller('PeopleController',function($scope) {
                 $scope.people = [
                     {name: "Ari", city: "San Francisco"},
                     {name: "Erik", city: "Seattle"}
                   ];
               });


k.ng-init
  使用说明: ng-init指令用来在指令被调用时设置内部作用域的初始状态
           <div ng-init="greeting='Hello';person='World'"> {{greeting}} {{person}}</div>

l.ng-if
  使用说明: ng-if指令用来根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if 的表达式的值是false,那对应的元素将会从DOM中移除,
           否则对应元素的一个克隆将被重新插入DOM
           <div ng-if="2+2===5">我将不会出现</div>
           <div ng-if="2+2===4">你可以看到我</div>

m.ng-bind
  使用说明: 尽管可以在视图中使用{{ }}模板语法(angularJS内置的方式),我们也可以通过ng-bind 指令实现同样的行为;
           HTML加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁,我可以用ng-bind将内容同元素绑定在一起避免未渲染内容闪烁,
           内容会被当作子文本节点渲染到含有ng-bind指令的元素内
           <div ng-if="2+2===5">我将不会出现</div>
           <div ng-if="2+2===4">你可以看到我</div>

n.ng-bind-template
  使用说明: 同ng-bind指令类似,ng-bind-template用来在视图中绑定多个表达式
           <div ng-bind-template="{{message}}{{name}}"></div>

o.ng-cloak
  使用说明: 除使用ng-bind来避免未渲染元素闪烁,还可以在含有{{ }}的元素上使用ng-cloak指令
           <body ng-init="greeting='HelloWorld'">
               <p ng-cloak>{{ greeting }}</p>
           </body>

p.ng-model
  使用说明: ng-model指令用来将input、select、text area或自定义表单控件同包含它们的作用域中 的属性进行绑定
           <input type="text" ng-model="modelName.someProperty" />


q.ng-click
  使用说明: ng-click指令用来指定一个元素被点击时调用的方法或表达式

<div ng-controller="counterCtrl">
              <button ng-click="count = count + 1" ng-init="count=0">点我递加</button>
              <span> count: {{ count }}</span>
              <button ng-click="decrement()">点我递减</button>
           <div>
           angular.module('freefedApp',[]).controller('counterCtrl',['$scope', function($scope) {
              $scope.decrement = function() {
                  $scope.count = $scope.count - 1;
              }; 
           }])；

r.ng-change
  使用说明: ng-change指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入,这个指令要 和ngModel联合起来使用

<div ng-controller="equationCtrl">
             <input type="text" ng-model="equation.x" ng-change="change()" />
             <div>{{ equation.output }}</div>
           </div>
           angular.module('freefedApp',[]) .controller('equationCtrl',['$scope',function($scope) {
               $scope.equation = {};
               $scope.change = function() {
                  $scope.equation.output = parseInt($scope.equation.x) + 2;
               }; 
           ]});

s.ng-submit
  使用说明: ng-model指令用来将表达式同onsubmit事件进行绑定

<form ng-submit="submit()" ng-controller="formCtrl">
             Enter text and hit enter:
             <input type="text"  ng-model="person.name" name="person.name" />
             <input type="submit" value="提交" />
          </form>
          angular.module('freefedApp',[]).controller('formCtrl',['$scope',function($scope) {
             $scope.person = {
                 name: null
             };
             $scope.people = [];
             $scope.submit = function() {
                 if( $scope.name ){
                 
                 }
             }; 
         ]});

t.ng-include

  使用说明: ng-include指令可以加载、编译并包含外部html片段到当前应用中来

user.html
            <span>姓名： {{user.name}}</span>
            <span>年龄: {{user.age}}</span>
                  
          <div ng-include=" 'user.html' " ng-controller="userCtrl"></div>

          angular.module('freefedApp',[]).controller('userCtrl',['$scope',function($scope) {
             $scope.user = {
               name: 'zhangzhen',
               age : '26'
             };
         ]});

会员力量，点亮园子希望

刷新页面返回顶部