码迷,mamicode.com
首页 > 其他好文 > 详细

angular指令大全

时间:2015-02-09 01:58:37      阅读:392      评论:0      收藏:0      [点我收藏+]

标签:

  这篇文章的案例都是来自官方,引用的cdn来自bootcss, 因为angular的官方网站被屏了, 所以要翻, 不过我把整个文档下回来了,方便大家下载可以点击: 打开下载英文版

  angular的指令

  a标签(也就是html的锚标签);

  angular的所有事件直接绑定在元素的上,而且事件都是以“ng-****”开头,比如ng-click,ng-keydown,ng-keypress,ng-mouseover....

  基本的绑定事件代码, 点击a标签会触发该控制器内部$scope的alert事件;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="app-controller">
    //我们先来看angular的默认的指令
    a标签(也就是html的锚标签);
    <a href="" ng-click="alert(1)">a标签</a>
    <script>
        var app = angular.module("app",[]);
        app.controller("app-controller", function($scope){
            console.log( $scope );
            $scope.alert = function() {
                alert(2)
            };
        })
    </script>
</body>
</html>

 

   form标签

  form标签的默认属性比较多, 基本上HTML所有的标签都被angular的默认指令扩展了, 所以dom元素有很多多出来的属性可以用,$form.$valid是指这个表单内部的所有元素是否可以通过校验,$ngDirty, $ngInvalid, $ngPristine等;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="formExample">
<script>
    angular.module(‘formExample‘, [])
            .controller(‘FormController‘, [‘$scope‘, function($scope) {
                $scope.userType = ‘guest‘;
            }]);
</script>
<style>
    .my-form {
        -webkit-transition:all linear 0.5s;
        transition:all linear 0.5s;
        background: transparent;
    }
    .my-form.ng-invalid {
        background: red;
    }
</style>
<form name="myForm" ng-controller="FormController" class="my-form">
    userType: <input name="input" ng-model="userType" required><br>
    <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
    nono_model: <input name="nono" ng-model="nono_model" required><br>
    <tt>userType = {{userType}}</tt><br>
    <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
    <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
    <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
    <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
    <tt>myForm input is nono $valid {{myForm.nono.$valid}}</tt>
</form>

</body>
</html>

  表单两种不同的状态如图;

  技术分享技术分享

   

  input也有很多的angular属性, ng-model是必须的, 如果input有name属性那么,我们直接通过formName.inputName获取该元素,ngMinLength,,ngMaxLength,ng-parttern,通过正则判断input是否匹配,ngChange,这个是一个事件属性,实例:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="inputExample">

    <script>
        angular.module(‘inputExample‘, [])
                .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
                    $scope.user = {name: ‘guest‘, last: ‘visitor‘};
                }]);
    </script>

    <div ng-controller="ExampleController">
        <form name="myForm">
            User name: <input type="text" name="userName" ng-model="user.name" required>
            <span class="error" ng-show="myForm.userName.$error.required">
          Required!</span><br>
            Last name: <input type="text" name="lastName" ng-model="user.last" ng-minlength="3" ng-maxlength="10">
            <span class="error" ng-show="myForm.lastName.$error.minlength">
          Too short!</span>
            <span class="error" ng-show="myForm.lastName.$error.maxlength">
          Too long!</span><br>
        </form>
        <hr>
        <tt>user = {{user}}</tt><br/>
        <tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
        <tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
        <tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>
        <tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br>
        <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
        <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
        <tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
        <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>
    </div>

</body>
</html>

 

  input[checkbox],是checkbox的input元素跟input是不一样的,有了ng-false-value,ng-true-value这两个属性:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="checkboxExample">
    <script>
        angular.module(‘checkboxExample‘, [])
                .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
                    $scope.value1 = true;
                    $scope.value2 = ‘YES‘
                }]);
    </script>
    <form name="myForm" ng-controller="ExampleController">
        Value1: <input type="checkbox" ng-model="value1"> <br/>
        Value2: <input type="checkbox" ng-model="value2"
                       ng-true-value="‘YES‘" ng-false-value="‘NO‘"> <br/>
        <tt>value1 = {{value1}}</tt><br/>
        <tt>value2 = {{value2}}</tt><br/>
    </form>
</body>
</html>

  ng-ture-value意思是如果这个input被选中,那么这个input对应的ng-model的值为ng-true-value, 上面的代码对应的输出如下图;

  技术分享

   

   input[date], 日期属性, 可以设置min和max:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="dateInputExample">
    <script>
        angular.module(‘dateInputExample‘, [])
                .controller(‘DateController‘, [‘$scope‘, function($scope) {
                    $scope.value = new Date(2013, 9, 22);
                }]);
    </script>
    <form name="myForm" ng-controller="DateController as dateCtrl">
        Pick a date in 2013:
        <input type="date" id="exampleInput" name="input" ng-model="value"
               placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />
       <span class="error" ng-show="myForm.input.$error.required">
           Required!</span>
       <span class="error" ng-show="myForm.input.$error.date">
           Not a valid date!</span>
        <tt>value = {{value | date: "yyyy-MM-dd"}}</tt><br/>
        <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
        <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
        <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
        <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
    </form>
</body>
</html>

  日期设置了max和min,所以只能选择指定区间的日期:

  技术分享  

 

  还有emai类型的inputDemo:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="emailExample">
    <script>
        angular.module(‘emailExample‘, [])
                .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
                    $scope.text = ‘me@example.com‘;
                }]);
    </script>
    <form name="myForm" ng-controller="ExampleController">
        Email: <input type="email" name="input" ng-model="text" required>
      <span class="error" ng-show="myForm.input.$error.required">
        Required!</span>
      <span class="error" ng-show="myForm.input.$error.email">
        Not valid email!</span>
        <tt>text = {{text}}</tt><br/>
        <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
        <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
        <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
        <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
        <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
    </form>
</body>
</html>

 

 

  input[radio],这种输入类型有两种属性,第一种是value,对应的是ng-model的值,第二种是ngValue,对应的是$scope内部的变量值:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="radioExample">
    <script>
        angular.module(‘radioExample‘, [])
                .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
                    $scope.color = ‘blue‘;
                    $scope.specialValue = {
                        "id": "12345",
                        "value": "green"
                    };
                }]);
    </script>
    <form name="myForm" ng-controller="ExampleController">
        <input type="radio" ng-model="color" value="red">  Red <br/>
        <input type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
        <input type="radio" ng-model="color" value="blue"> Blue <br/>
        <tt>color = {{color | json}}</tt><br/>
    </form>
    Note that `ng-value="specialValue"` sets radio item‘s value to be the value of `$scope.specialValue`.
</body>
</html>

 

  input还有很多类型,比如input[text],input[url],input[week],input[month],input[number],angular给不同的input添加了不同的属性,不一一罗列了;

 

  ngApp 这个自定义指令很重要,我们上面的所有DEMO都在body元素上添加了ng-app属性, 添加了ng-app属性的元素会自动加载到angular模块里面去, 所以我们就不要写angular.bootstrap(element, ["moduleName"]), 但是自动加载的ng-app在一个页面只能有一个, 两个或者更多就会出现问题, 那么能才能在一个html文件添加多个angular模块呢, 可以得,但是我们不给元素设置ng-app属性,我们手动通过angular.bootstrap加载模块;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body>
<div  id="ap0">
    <div ng-controller="app0-c">
        {{a}}
    </div>
</div>
<div  id="ap1">
    <div ng-controller="app1-c">
        {{a}}
    </div>
</div>
<script>
    angular.module("app0",[]).controller("app0-c",function($scope){
        $scope.a = 0;
    });
    angular.module("app1",[]).controller("app1-c",function($scope){
        $scope.a = 1;
    });

    angular.bootstrap( document.getElementById("ap0") ,["app0"]);
    angular.bootstrap( document.getElementById("ap1"), ["app1"] )
</script>
</body>
</html>

  ok,界面显示一个0,还有一个1, 我们在一个html文件里面启动了两个不关联的app了

 

  angular的ng-bind指令, 这个指令是指ng-bind的值就是这个元素的textContent或者是innerText;ng-bind对应的一个ng-bind-html, ng-bind-html指的是ng-bind-html的值为这个元素的innerHTML, 要注意的是ng-bind-html依赖了一个叫做angular-sanitize的模块,所以要手动导入这个JS,要么会报错

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-sanitize.min.js"></script>
</head>
<body>
    <script>
        angular.module(‘bindExample‘, ["ngSanitize"])
                .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
                    $scope.name = ‘Whirled‘;
                    $scope.myHTML = ‘I am an <code>HTML</code>string with ‘ +
                            ‘<a href="#">links!</a> and other <em>stuff</em>‘;
                }]);
    </script>
    <div id="bindExample" ng-controller="ExampleController">
        Enter name: <input type="text" ng-model="name"><br>
        Hello <span ng-bind="name"></span>!
        <p ng-bind-html="myHTML"></p>
    </div>
    <script>
        angular.bootstrap(document.getElementById("bindExample"),["bindExample"]);
    </script>
</body>
</html>

 

 

  ng-bind-template指令, 这个指令跟ng-bind 差不多, ng-bind是指替换元素的textContent为ng-bind的值,ng-bind-template是指替换元素的textContent的值为ng-bind-template经过angular.parse().assign的内容;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="bindExample">
    <script>
        angular.module(‘bindExample‘, [])
                .controller(‘ExampleController‘, [‘$scope‘, function ($scope) {
                    $scope.salutation = ‘Hello‘;
                    $scope.name = ‘World‘;
                }]);
    </script>
    <div ng-controller="ExampleController">
        Salutation: <input type="text" ng-model="salutation"><br>
        Name: <input type="text" ng-model="name"><br>
        <pre ng-bind-template="{{salutation}} {{name}}!"></pre>
        <p>其实你直接这样写也行</p>
        <p>{{salutation}} {{name}}!</p>
        <p>压根不需要ng-bind-template</p>
    </div>
</body>
</html>

 

   ng-if效果跟ng-show一样, 不同的是ng-if如果是false,那么这个元素的dom节点都没有了,如果为true,那么该节点重新加载到dom;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="app">
    Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
    Show when checked:
    <span ng-if="checked" class="animate-if">
      Im removed when the checkbox is unchecked.
    </span>
    <script>
        var APP = angular.module(‘app‘, []);
    </script>
</body>
</html>

 

   ng-href,如果一个锚点的链接是动态的,比如<a href="{{href}}">gogogo</a>,如果你点击那么界面会调到{{href}},为了动态添加href,那么ng-href就出现了:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="app">
    <input ng-model="value" /><br />
    <a id="link-1" href ng-click="value = 1">link 1</a> (link, don‘t reload)<br />
    <a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don‘t reload)<br />
    <a id="link-3" ng-href="/{{‘123‘}}">link 3</a> (link, reload!)<br />
    <a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don‘t reload)<br />
    <a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />
    <a id="link-6" ng-href="{{value}}">link</a> (link, change location)
    <script>
        var APP = angular.module(‘app‘, []);
    </script>
</body>
</html>

 

 

   ng-show,和ng-hide如果元素的ng-show为true,那么元素就显示, 否则就隐藏, ng-hide同理

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body>
    <div ng-app="app">
        Click me: <input type="checkbox" ng-model="checked"><br/>
        <div>
            Show:
            <div class="check-element " ng-show="checked">
                <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
            </div>
        </div>
        <div>
            Hide:
            <div class="check-element " ng-hide="checked">
                <span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked.
            </div>
        </div>
    </div>
    <script>
        var APP = angular.module(‘app‘, []);
    </script>
</body>
</html>

 

 

  如果ng-show和ng-hide同时存在一个节点上,那么隐藏和显示的状态根据ng-hide展现:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body>
    <div ng-app="app">
        Click me: <input type="checkbox" ng-model="checked"><br/>
        <div>
            Show:
            <div class="check-element " ng-hide="checked" ng-show="checked">
                <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
            </div>
        </div>
    <script>
        var APP = angular.module(‘app‘, []);
    </script>
</body>
</html>

 

  写着写着,chrome居然崩溃了, 我勒个去, 草稿都没存;

  ng-cloak存在完全是为了用户体验, 如果一个html界面angular.js还没加载进来,那么界面会有{{}}这样的标志,如果{{}}标志多了,用户会一头雾水啊, ng-cloak如果加在根节点,那么界面的{{}}会被隐藏,等到{{}}完全编译成动态数据的时候界面才可见;

 

  ng-class的用处还是很大的,通过模型绑定,我们根本不需要操作class,ng-class允许三种值:

  1:对象{bold:true,red:false}  那么bold这个class会生效;

  2:通过空格区分的字符串;

  3:一个数组,数组的每一个值都要为一个class即可:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body>
    <style>
        .strike {
            text-decoration: line-through;
        }
        .bold {
            font-weight: bold;
        }
        .red {
            color: red;
        }
    </style>
    <div ng-app="APP">
        <p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
        <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
        <input type="checkbox" ng-model="important"> important (apply "bold" class)<br>
        <input type="checkbox" ng-model="error"> error (apply "red" class)
        <hr>
        <p ng-class="style">Using String Syntax</p>
        <input type="text" ng-model="style" placeholder="Type: bold strike red">
        <hr>
        <p ng-class="[style1, style2, style3]">Using Array Syntax</p>
        <input ng-model="style1" placeholder="Type: bold, strike or red"><br>
        <input ng-model="style2" placeholder="Type: bold, strike or red"><br>
        <input ng-model="style3" placeholder="Type: bold, strike or red"><br>
    </div>

    <script>
        angular.module("APP",[]);
    </script>
</body>
</html>

   技术分享

 

  ng-include指令是指这个指令标签的innerHTML为指定的url,这个url为相对与当前目录的url地址或者绝对地址,angular会通过ajax请求该地址, 然后把地址的内容作为指令元素innerHTML填充;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body>
<div ng-app="includeExample" ng-controller="ExampleController">
    <select ng-model="template" ng-options="t.name for t in templates">
        <option value="">(blank)</option>
    </select>
    url of the template: <tt>{{template.url}}</tt>
    <hr/>
    <div ng-include="template.url"></div>
    <script>
        angular.module(‘includeExample‘,[])
                .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
                    $scope.templates =
                            [ { name: ‘template1.html‘, url: ‘template1.html‘},
                                { name: ‘template2.html‘, url: ‘template2.html‘} ];
                    $scope.template = $scope.templates[0];
                }]);
    </script>
</div>
</body>
</html>

  技术分享

 

    ng-list这个指令要和ng-model合起来用,ng-list在输入框的表现通过split(",")的数组才是实际的model, ng-list默认为","逗号, 要设置成自定义的区分符,直接为ng-list赋值即可;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="listExample">
    <form name="myForm" ng-controller="ExampleController">
        List: <input name="namesInput" ng-model="names" ng-list="!" required>
      <span class="error" ng-show="myForm.namesInput.$error.required">
        Required!</span>
        <br>
        <tt>names = {{names}}</tt><br/>
        <tt>myForm.namesInput.$valid = {{myForm.namesInput.$valid}}</tt><br/>
        <tt>myForm.namesInput.$error = {{myForm.namesInput.$error}}</tt><br/>
        <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
        <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
    </form>
    <script>
        angular.module(‘listExample‘, [])
                .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
                    $scope.names = [‘morpheus‘, ‘neo‘, ‘trinity‘];
                }]);
    </script>
</body>
</html>

 

   ng-model这个指令是很重要的指令,所有学习angular开发者对这个指令都无比熟悉, ng-model主要绑定的元素包括input, select, textarea 

   ng-model的元素都有ng-valid(可用),ng-invalid(不可用), ng-pristine(用户为对这个元素进行操作过), ng-dirty(元素的模型发生改变的话)属性; 这几个属性都是布尔值;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="inputExample">
    <script>
        angular.module(‘inputExample‘, [])
                .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
                    $scope.val = ‘1‘;
                }]);
    </script>
    <style>
        .my-input {
            -webkit-transition:all linear 0.5s;
            transition:all linear 0.5s;
            background: transparent;
        }
        .my-input.ng-invalid {
            color:white;
            background: red;
        }
    </style>
    Update input to see transitions when valid/invalid.
    Integer is a valid value.
    <form name="testForm" ng-controller="ExampleController">
        <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />
    </form>
</body>
</html>

   ng-pattern:匹配这个输入框的输入值是否符合这个正则,如果不匹配,这个元素会被加上ng-invalid的class, 如果匹配会被加上ng-valid的class;

   技术分享技术分享

  ng-model还可以指定为一个getersetter,相当于一个preSave,和preGet方法,模型的可控性变好了

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="getterSetterExample">
    <div ng-controller="ExampleController">
        <form name="userForm">
            Name:
            <input type="text" name="userName"
                   ng-model="user.name"
                   ng-model-options="{ getterSetter: true }" />
        </form>
        <pre>user.name = <span ng-bind="user.name()"></span></pre>
    </div>
    <script>
        angular.module(‘getterSetterExample‘, [])
                .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
                    var _name = ‘Brian‘;
                    $scope.user = {
                        name: function (newName) {
                            if (angular.isDefined(newName)) {
                                _name = newName;
                            }
                            return _name+1111;
                        }
                    };
                }]);
    </script>
</body>
</html>

 

  ngModelOption ,可以设置ng-model在元素失去焦点的时候更新model

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
    <form name="userForm">
        Name:
        <input type="text" name="userName"
               ng-model="user.name"
               ng-model-options="{ updateOn: ‘blur‘ }"
               ng-keyup="cancel($event)" /><br />

        Other data:
        <input type="text" ng-model="user.data" /><br />
    </form>
    <pre>user.name = <span ng-bind="user.name+user.data"></span></pre>
</div>
<script>
    angular.module(‘optionsExample‘, [])
            .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
                $scope.user = { name: ‘say‘, data: ‘‘ };

                $scope.cancel = function (e) {
                    if (e.keyCode == 27) {
                        $scope.userForm.userName.$rollbackViewValue();
                    }
                };
            }]);
</script>
</body>
</html>

 

  ng-mousedown, ng-mouseenter, ng-mouseleave, ng-mousemove, ng-mouseover, ng-mouseup, ng-click, ng-dblclick都是ng的事件这些事件和dom的事件区别是dom事件的执行作用域是该元素, 而angular的事件执行作用域是$scope下, 现在可能不明白,以后自然就懂了;

 

  ng-paste, ng-copy, ng-cut是一伙的,如果输入框的值是粘帖的,那么ng-paste就为真, ng-copy,ng-cut也是同理 , 提供了demo:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
    <input ng-paste="paste=true" ng-init="paste=false" placeholder=‘paste here‘>
    pasted: {{paste}}
</div>
<script>
    angular.module(‘optionsExample‘, [])
            .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
            }]);
</script>
</body>
</html>

 

  ng-non-bindable指令指该元素的内部{{****}}不被绑定和转义,不受angular的掌控:

<div>Normal: {{1 + 2}}</div>
<div ng-non-bindable>Ignored: {{1 + 2}}</div>

的输出值为 == 》》

Normal: 3
Ignored: {{1 + 2}}

 

  

  ng-readonly指令是指ng-model的只读, 不能随便更改, 和ng-disabled差不多, ( •? ω •? )y肯定有区别

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
    Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
    <input type="text" ng-readonly="checked" value="I‘m Angular"/>
    <br>
    Click me to toggle: <input type="checkbox" ng-model="checked_model"><br/>
    <button ng-model="button" ng-disabled="checked_model">Button</button>
</div>
<script>
    angular.module(‘optionsExample‘, [])
            .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
            }]);
</script>
</body>
</html>

 

  

  ng-open, 这个我也认为和ng-open, ng-hide差不多, 区别是ng-open只能绑定details元素,(details标签目前只有webkit浏览器支持), 当ng-open的值为open那么绑定的details内部的summary元素就显示

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
    Check me check multiple: <input type="checkbox" ng-model="open"><br/>
    <details id="details" ng-open="open">
        <summary>Show/Hide me</summary>
    </details>
</div>
<script>
    angular.module(‘optionsExample‘, [])
            .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
            }]);
</script>
</body>
</html>

 

  

  ng-repeat和(ng-repeat-start,ng-repeat-end)都是循环一个items, 区别是ng-repeat-start可以跨越多个标签, 而ng-repeat只能在一个标签里面循环, ng-repeat-start也很有用,因为可以跨多个标签, (其实只要把ng-repeat放在ng-repeat-start的父级,可以模拟ng-repeat-start, 个人想法....)DEMO:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
    使用ng-repeat-start和ng-repeat-end的循环
    <header ng-repeat-start="item in items">
        Header {{ item }}
    </header>
    <div class="body">
        Body {{ item }}
    </div>
    <footer ng-repeat-end>
        Footer {{ item }}
    </footer>

    使用ng-repeat的循环
    <div ng-repeat="item in items">
        {{item}}
    </div>
</div>
<script>
    angular.module(‘optionsExample‘, [])
            .controller(‘ExampleController‘, [‘$scope‘, function($scope){
                $scope.items =  [‘A‘,‘B‘];
            }]);
</script>
</body>
</html>

 

   ng-repeat里面提供了几个变量,为开发者提供一些快捷的操作,

    $index : 表示当前item的索引,

    $first : 如果item为第一个,那么$first为true ,

    $middle : 如果item不是开头,不是结尾$middle为true,

    $last : 如果item是最后一个,  $last为true,

    $even : 如果索引为偶数, 那么$even为true,否则为false

    $odd : 同上, 索引为奇数$odd为true....;

  如果你喜欢的话,可以循环对象的key和value,比如

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
    <div  ng-repeat="(name, age) in {‘adam‘:10, ‘amalie‘:12}">
        {{name}}+{{age}}
    </div>
</div>
<script>
    angular.module(‘optionsExample‘, [])
            .controller(‘ExampleController‘, [‘$scope‘, function($scope){
            }]);
</script>
</body>
</html>

 

  ng-repeat还提供了别的特性, 让循环更加强大, 可以这么写 item in items | filter:as results,结果filter过滤后的结果会被保存到results,可以这么用:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
    <div ng-init="friends = [
  {name:‘John‘, age:25, gender:‘boy‘},
  {name:‘Jessie‘, age:30, gender:‘girl‘},
  {name:‘Johanna‘, age:28, gender:‘girl‘},
  {name:‘Joy‘, age:15, gender:‘girl‘},
  {name:‘Mary‘, age:28, gender:‘girl‘},
  {name:‘Peter‘, age:95, gender:‘boy‘},
  {name:‘Sebastian‘, age:50, gender:‘boy‘},
  {name:‘Erika‘, age:27, gender:‘girl‘},
  {name:‘Patrick‘, age:40, gender:‘boy‘},
  {name:‘Samantha‘, age:60, gender:‘girl‘}
]">
        I have {{friends.length}} friends. They are:
        <input type="search" ng-model="q" placeholder="filter friends..." />
        <ul class="example-animate-container">
            <li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
                [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
            </li>
            <li class="animate-repeat" ng-if="results.length == 0">
                <strong>No results found...</strong>
            </li>
        </ul>
    </div>
</div>
<script>
    angular.module(‘optionsExample‘, [])
            .controller(‘ExampleController‘, [‘$scope‘, function($scope){
            }]);
</script>
</body>
</html>

  技术分享

  ng-selected这个指令我是不怎么用到, 这个指令的值指向一个模型, 如果这个模型为真, 那么这个ng-selected就是select标签的当前选中选项

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
Check me to select: <input type="checkbox" ng-model="selected"><br/>
    <select>
        <option>Hello!</option>
        <option id="greet" ng-selected="selected">Greetings!</option>
    </select>
</div>
<script>
    angular.module(‘optionsExample‘, [])
            .controller(‘ExampleController‘, [‘$scope‘, function($scope){
            }]);
</script>
</body>
</html>

  

  ng-src这个指令也有用的, 界面加载的时候才不管img的标签src有什么,都会一并加载, 如果图片的src包含了{{****}}这些字符, 浏览器不会管这是什么东西, 在渲染dom树的时候,会直接请求这个地址,如果想通过{{****}}动态生成img标签的src,不要用src,要用ng-src。

 

  script标签可以作为ng-include的模板使用,把类型type设置为"text/ng-template":

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
    <script type="text/ng-template" id="/tpl.html">
        Content of the template.
    </script>

    <a ng-click="currentTpl=‘/tpl.html‘" id="tpl-link">Load inlined template</a>
    <div id="tpl-content" ng-include src="currentTpl"></div>
<script>
    angular.module(‘optionsExample‘, [])
            .controller(‘ExampleController‘, [‘$scope‘, function($scope){
            }]);
</script>
</body>
</html>

 

  ng-switch这个指令相当于通过$scope内部变量控制dom的隐藏和显示:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="switchExample">
    <div ng-controller="ExampleController">
        <select ng-model="selection" ng-options="item for item in items">
        </select>
        <tt>selection={{selection}}</tt>
        <hr/>
        <div class="animate-switch-container"
             ng-switch on="selection">
            <div class="animate-switch" ng-switch-when="settings">Settings Div</div>
            <div class="animate-switch" ng-switch-when="home">Home Span</div>
            <div class="animate-switch" ng-switch-default>default</div>
        </div>
        
    </div>
<script>
    angular.module(‘switchExample‘,[])
            .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
                $scope.items = [‘settings‘, ‘home‘, ‘other‘];
                $scope.selection = $scope.items[0];
            }]);
</script>
</body>
</html>

 

  通过ng-switch来控制dom结构,其实这个指令非常强大哦, 相当于是为html代码提供了ifelse的功能(因为angular的html中不能通过ifelse控制逻辑):

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="switchExample">
    <div ng-controller="ExampleController">
        <div ng-repeat="item in items">
            <div ng-switch="item">
                ——————————————————————
                <div ng-switch-when="settings">Settings Div</div>
                <div ng-switch-when="home">Home Span</div>
                <div ng-switch-default>default</div>
            </div>
        </div>
    </div>
<script>
    angular.module(‘switchExample‘,[])
            .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
                $scope.items = [‘settings‘, ‘home‘, ‘other‘];
                $scope.selection = $scope.items[0];
            }]);
</script>
</body>
</html>

 

 

  ng-value这个指令的demo:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="valueExample">
<script>
    angular.module(‘valueExample‘, [])
            .controller(‘ExampleController‘, [‘$scope‘, function($scope) {
                $scope.names = [‘pizza‘, ‘unicorns‘, ‘robots‘];
                $scope.my = { favorite: ‘unicorns‘ };
            }]);
</script>
<form ng-controller="ExampleController">
    <h2>Which is your favorite?</h2>
    <label ng-repeat="name in names" for="{{name}}">
        {{name}}
        <input type="radio"
               ng-model="my.favorite"
               ng-value="name"
               id="{{name}}"
               name="favorite">
    </label>
    <div>You chose {{my.favorite}}</div>
</form>
</body>
</html>

   

  ng-style指令demo, 这个指令接收一个对象, 对象的key为css名字,val为样式的值, val我们可以绑定$scope中的变量:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="styleModule">
    <input type="button" value="set color" ng-click="myStyle={color:‘red‘}">
    <input type="button" value="set background" ng-click="myStyle={‘background-color‘:‘blue‘}">
    <input type="button" value="clear" ng-click="myStyle={}">
    <br/>
    <span ng-style="myStyle">Sample Text</span>
    <pre>myStyle={{myStyle}}</pre>
<script>
    angular.module("styleModule",[])
</script>
</body>
</html>

 

  周末好快就过完了,睡( ̄o ̄) . z Z一觉起床上班啦, 因为写的匆忙, 有错别字或者代码错误欢迎指正;

angular指令大全

标签:

原文地址:http://www.cnblogs.com/diligenceday/p/4279767.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!