Angular指令

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Angular指令，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含12947字，纯文字阅读大概需要19分钟。

内容图文

一、指令

基础指令

1、ng-disabled

使用ng-disabled可以把disabled属性绑定到以下表单输入字段上： <input> （ text、 checkbox、 radio、 number、 url , email 、 submit）； <textarea> ； <select> ； <button> 。

案例1：
<input type="text" ng-disabled="true" placeholder="TypetoEnable">

在下面的例子，文本字段会被禁用五秒，直到在$timeout中将isDisabled属性设置为true：

            <textarea ng-disabled="isDisabled">Wait5seconds</textarea>
angular.module(‘myApp‘, [])
.run(function($rootScope, $timeout) {
 $rootScope.isDisabled = true;
 $timeout(function() {
 $rootScope.isDisabled = false;
 }, 5000);
});

2、ng-select

用来将数据同HTML的<select> 元素进行绑定。这个指令可以和ng-model 以及ng-options指令一同使用，构建精细且表现优良的动态表单。

3、ng-options

ng-options的值可以是一个内涵表达式注意上边option位置是怎么写的？接受一个数组或对象，并对它们进行循环，将内部的内容提供给select标签内部的选项。

演示代码：

            angular.module(‘myApp‘,[])
            .controller(‘myController‘,function($scope) {
                $scope.cities = [
                    {name: ‘Seattle‘},
                    {name: ‘San Francisco‘},
                    {name: ‘Chicago‘},
                    {name: ‘New York‘},
                    {name: ‘Boston‘}
                ];
            });

 <select ng-model="city"
            ng-options="city.name for city in cities">
        <option value="">Choose City</option>
    </select>
    Best City: {{ city.name }}

4、ng-submit

ng-submit用来将表达式同onsubmit事件进行绑定。这个指令同时会阻止默认行为（发送请求并重新加载页面），除非表单不含有action属性。

演示代码：

            <form ng-submit="submit()"
      ng-controller="FormController">
    Enter text and hit enter:
    <input type="text"
           ng-model="person.name"
           name="person.name" />
    <input type="submit" value="Submit" />
</form>
<script type="text/javascript">
    angular.module(‘myApp‘,[])
            .controller(‘FormController‘,function($scope) {
                $scope.person = {};
                $scope.submit = function() {
                  alert($scope.person.name)
                };
            });
</script>

5、ng-app

任何具有ng-app属性的DOM元素将被标记为$rootScope的起始点。

演示代码：

            <div ng-app="myApp">
    {{ someProperty }}
    <button ng-click="someAction()">测试</button>
</div>
<script type="text/javascript">
    angular.module(‘myApp‘, [])
            .run(function($rootScope) {  //注意这里的run方法，我们之前就用过几次，后边会在module加载的时候解释，现在用就可以了
                $rootScope.someProperty = ‘hello world‘;
                $rootScope.someAction = function() {
                    $rootScope.someProperty = ‘你好世界‘;
                };
            });
</script>

6、ng-controller

内置指令ng-controller的作用是为嵌套在其中的指令创建一个子作用域，避免将所有操作和模型都定义在$rootScope上。用这个指令可以在一个DOM元素上放置控制器。

$scope只是一个JavaScript对象，其中含有从父级$scope中通过原型继承得到的方法和属性，包括应用的$rootScope。

嵌套在ng-controller中的指令有访问新子$scope的权限，但是要牢记每个指令都应该遵守的和作用域相关的规则。注意：$scope对象的职责是承载DOM中指令所共享的操作和模型。

演示代码：

            <div ng-app="myApp">
    <div ng-controller="myController">
    {{ someModel.someProperty }}
    <button ng-click="someAction()">click me</button>
</div>
</div>
<script type="text/javascript">
    angular.module(‘myApp‘,[])
            .controller(‘myController‘, function($scope) {
                //创建模型
                $scope.someModel = {
                    // 添加属性
                    someProperty: ‘hello world‘
                }
                // 设置$scope自身的操作
                $scope.someAction = function() {
                    $scope.someModel.someProperty =‘ 你好世界‘;
                };
            });
</script>

案例2：之前作用域嵌套

            <div ng-app="myApp">
    <div ng-controller="SomeController">
        {{ someBareValue }}
        <button ng-click="someAction()">Communicate to child</button>
        <div ng-controller="ChildController">
            {{ someBareValue }}
            <button ng-click="childAction()">Communicate to parent</button>
        </div>
    </div>
</div>
</div>
<script type="text/javascript">
    angular.module(‘myApp‘, [])
            .controller(‘SomeController‘, function($scope) {
                // 反模式，裸值
                $scope.someBareValue = ‘hello computer‘;
                // 设置 $scope 本身的操作，这样没问题
                $scope.someAction = function() {
                    // 在SomeController和ChildController中设置{{ someBareValue }}
                    $scope.someBareValue = ‘hello human, from parent‘;
                };
            })
            .controller(‘ChildController‘, function($scope) {
                $scope.childAction = function() {
                    // 在ChildController中设置{{ someBareValue }}
                    $scope.someBareValue = ‘hello human, from child‘;
                };
            });
</script>

7、ng-switch

可以在数据发生变化时渲染不同指令到视图中。

演示代码：

            <div ng-app>
    <input type="text" ng-model="person.name"/>
    <div ng-switch on="person.name">
        <p ng-switch-default>admin</p>
        <h1 ng-switch-when="zhangsan">{{ person.name }}</h1>
    </div>
</div>

8、ng-if

使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则对应元素的一个克隆将被重新插入DOM中。

演示代码：

            <div ng-app>
    <div ng-if="2+3===5">
       hello world
    </div>
</div>

<div ng-app="myApp" ng-controller="myController">
    <div ng-if="test">
        hello world
    </div>
</div>

   angular.module(‘myApp‘,[])
            .controller(‘myController‘, function($scope) {
              $scope.test=false;
            });

重要：

9、ng-repeat

ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。参数：

$index：遍历的进度（ 0...length-1 ）。

$first：当元素是遍历的第一个时值为true。

$middle：当元素处于第一个和最后元素之间时值为true。

$last：当元素是遍历的最后一个时值为true。

$even：当$index值是偶数时值为true。

$odd：当$index值是奇数时值为true。

演示代码：

            <div ng-app="myApp">
    <ul ng-controller="myController" >
        <li ng-repeat="stu in people" ng- >  //{even:！$even,odd:!$odd}注意
            {{stu.name}} lives in {{stu.city}}
        </li>
    </ul>

</div>
<script type="text/javascript">
    angular.module(‘myApp‘,[])
            .controller(‘myController‘,function($scope) {
                $scope.people = [
                    {name: "Ari", city: "San Francisco"},
                    {name: "Erik", city: "Seattle"},
                    {name: "zhgangsan", city: "chengdu"}
                ];
            });
</script>

10、ng-init

ng-init指令用来在指令被调用时设置内部作用域的初始状态。主要用于测试或出示的时候

               <div ng-init="word1=‘Hello‘;word2=‘World‘">
        {{word1}} {{word2}}
    </div>

11、{{ }}

{{ }} 语法是AngularJS内置的模板语法，它会在内部$scope和视图之间创建绑定。基于这个绑定，只要$scope发生变化，视图就会随之自动更新。

             <div ng-init="test=‘HelloWorld‘">
            {{test}}
    </div>

12、bind绑定

bind绑定——特别说明，之前我们直接绑定的时候{{}}当我们刷新页面或者用户网速比较慢的时候会把{{name}}--这个东西闪烁一下再出来值，bind就是解决方案。

            <div ng-init="test=‘HelloWorld‘">
       <p ng-bind="test"></p>&mdash;&mdash;而且对样式好控制
</div>

除使用ng-bind来避免未渲染元素闪烁，还可以在含有{{ }} 的元素上使用ng-cloak指令：

            <body ng-init="greeting=‘HelloWorld‘">
 <p ng-cloak>{{ greeting }}</p>
</body

13、ng-cloak

指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。——用这种办法同样能去掉闪烁

            <div ng-init="test=‘HelloWorld‘">
           <p ng-cloak>{{test}}</p>
    </div>

14、ng-bind-template

同ng-bind指令类似， ng-bind-template用来在视图中绑定多个表达式。

演示代码：

            <div ng-app="myApp" >
    <div ng-controller="myController">
        <p ng-bind-template="{{name}}{{age  }}"></p>
    </div>
</div>

</div>
<script type="text/javascript">
    angular.module(‘myApp‘,[])
            .controller(‘myController‘,function($scope) {
                $scope.name ="zhangsan" ;
                $scope.age=19;
            })
</script>

15、ng-show/ng-hide

ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏。类似地，当赋值给ng-hide指令的值为true时元素也会被隐藏。

演示代码：

            <div ng-show="2 + 3 == 5">----和之前的什么优点类似呢？
   hello
</div>


 alert($("div").attr("ng-show"))&mdash;&mdash;通过jquery访问一下

16、ng-click

ng-click用来指定一个元素被点击时调用的方法或表达式。——之前已经用过

            <body ng-app="myApp" >
<div ng-controller="myController">
    <button ng-click="count = count + 1"
            ng-init="count=0">
        add
    </button>
    count: {{ count }}
    <button ng-click="subtraction(2)">subtraction</button>
</div>
</body>

</div>
<script type="text/javascript">
    angular.module(‘myApp‘,[])
            .controller(‘myController‘, function($scope) {
                $scope.subtraction = function(num) {
                    $scope.count -= num;
                };
            })
</script>

定义指令

AngularJS应用的模块中有很多方法可以使用，其中directive() 这个方法是用来定义指令的：用法：

演示代码：

            angular.module(‘myApp‘, [])
.directive(‘myDirective‘, function ($timeout, UserDefinedService) {
 // 指令定义放在这里
});

1、directive()

directive() 方法可以接受两个参数：
1. name（字符串）指令的名字，用来在视图中引用特定的指令。 factory_function （函数）这个函数返回一个对象，其中定义了指令的全部行为。 $compile服务利用这个方法返回的对象，在DOM调用指令时来构造指令的行为。

用例：

            <div ng-app="myApp" ng-controller="myController">
        <test></test>
         <span test></span>
       <span ></span>
         <!-- directive:test -->
          <div></div>
</div>
 var app= angular.module(‘myApp‘,[])
         app.directive("test",function(){
             return{
                 restrict:"AEMC",   ---注意这里的AEMC分别带别什么
                  template:"<span>hello world</span>",
                  replace:true
             }
         })

        template:"<p>hello wolrd <span ng-transclude></span></p>",
            transclude:true  ---注意这是做什么 的

错误示范：

              var app = angular.module(‘myApp‘, []);
    app.directive("test",function(){
        return{
          //  scope:{},
            restrict:"AEMC",
              template:‘<div><input type="text" ng-model="name"/>{{name}}</div>‘,
              replace:true
    }
    })
  <test></test>
    <test></test>---发生了什么事请？怎么解决

案例2：在自定义指令中做动作

            <script type="text/javascript">
    var app = angular.module(‘myApp‘, []);
    app.controller("myController",["$scope",function($scope){
        $scope.fun=function(){
            alert("hello")
        }
    }])
    app.directive("test",function(){
        return{
            restrict:"AE",
            link:function(scope,element,attr){
                element.bind("click",function(){
                    scope.$apply("fun()")
                })
            }
        }
    })

<div ng-app="myApp" ng-controller="myController">
    {{name}}
    <test>点击我啊</test>
</div>

这里有个关键的字：howToLoad---当页面上的两个地方都要使用同一个link去做一些业务处理的时候。

演示代码：

            <div ng-controller="myController2">
    <p test howToLoad="fun2()">hello</p>
</div>

<div ng-controller="myController">
    <p  test howToLoad="fun1()">hello</p>
</div>




<script type="text/javascript">
    var app = angular.module(‘myApp‘, []);
    app.controller("myController",["$scope",function($scope){
        $scope.fun1=function(){
            alert("hello")
        }
    }])

    app.controller("myController2",["$scope",function($scope){
        $scope.fun2=function(){
            alert("hello2")
        }
    }])
    app.directive("test",function(){
        return{
            restrict:"AE",
            link:function(scope,element,attr){
                element.bind("click",function(){
                    scope.$apply(attr.howtoload)
                })
            }
        }
    })

angularjs帮我做了一些内置指令之前学过一些，这边它大概帮我们提供了60+种指令我们现在来看我们最为关心的form指令。

演示代码：

            <form name="myForm" ng-submit="save()" ng-controller="myController">
        <input type="text" name="userName" ng-model="user.name" required>
        <input type="password" name="pwd" ng-model="user.pwd" required>
        <input type="submit" ng-disabled="myForm.$invalid">
</form>

 var app = angular.module(‘myApp‘, []);
   app.controller("myController",["$scope",function($scope){
       $scope.user={}
       $scope.save=function(){
           alert($scope.user.name)
       }
   }])

模块引入

在自定义Angular指令时，其中有一个叫做require的字段，这个字段的作用是用于指令之间的相互交流。举个简单的例子，假如我们现在需要编写两个指令，在linking函数中有很多重合的方法，为了避免重复自己（著名的DRY原则），我们可以将这个重复的方法写在第三个指令的 controller中，然后在另外两个需要的指令中require这个拥有controller字段的指令，最后通过linking函数的第四个参数就可以引用这些重合的方法。

演示代码：

            var app = angular.modeule(‘myapp‘,[]);  

app.directive(‘parent‘,function(){  
    return {  
    ...  
    controller: function($scope){  
        this.method1 = function(){  
        };  
        this.method2 = function(){  
        };  
    },  
    ...  
    }  
});  

app.directive(‘d1‘,function(){  
    return {  
    ...  
    require: ‘^parent‘,  
    link: function(scope,elem,attrs,parent){  
       parent.method1()
        ..  
        },  
    ...  
    }  
});

我们一般引入它：require: ‘ngModel‘,
我们在require里定义了ngModel 所以这里它是一个NgModelController NgModelController是用来为ng-model提供了一组API。通过他我们可以他来确定ngModel的值是否是合法的。我们来做这么一个实验，验证我们的表单中的一些数据是否合法。

演示代码：

             var app = angular.module(‘myApp‘, []);
    app.directive("isUse",function($http){
        return {
            restrict:"A",
            require:"ngModel",
            link:function(scope,element,attr,model){
                element.bind("blur",function(){
                    scope.$apply(function(){
                        if(scope.username == "abcdefg"){
                            model.isExist = true;
                        }else{
                            model.isExist = false;
                        }
                    });

                });
            }
        };
    });
<form name="myForm">
    用户名：<input type="text" name="username" ng-model="username" ng-pattern="/^\w{6,20}$/" required is-use />
    <span ng-show="myForm.username.$error.required">用户名不能为空</span>
    <span ng-show="myForm.username.$error.pattern">用户名格式不正确</span>
    <span ng-show="myForm.username.isExist">用户名已存在</span>
</form>

二、同外界通信： XHR和服务器通信

$http

我们可以使用内置的$http服务直接同外部进行通信。 $http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。

$http服务是只能接受一个参数的函数，这个参数是一个对象，包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象，具有success和error两个方法。

演示代码：

            $http({
 method: ‘GET‘,
 url: ‘/api/users.json‘
}).success(function(data,status,headers,config) {
 // 当相应准备就绪时调用
}).error(function(data,status,headers,config) {
 // 当响应以错误状态返回时调用
});

案例1：

点击按钮的时候从后台加载数据：

            <body ng-app="myApp">
<div ng-controller="myController">
<button ng-click="fun()">click me</button>
</div>
<script type="text/javascript">
    angular.module(‘myApp‘,[])
            .controller(‘myController‘,["$scope","$http",function($scope,$http){
                $scope.fun=function(){
                    $http({
                        method:‘get‘,
                        url:"data.json"
                    }).success(function(data){
                                alert(data)
                            })
                }
            }]);
</script>

注意这里http方式完整模式：

            $http({
            method:‘POST‘,
            url:_finalUrl,
            data:_data,
             headers:{
                ‘Content-Type‘: ‘application/x-www-form-urlencoded‘
            }
        }).success(function(data){
            deferred.resolve(data);
        }).error(function(data, status, headers, config) {
            deferred.reject(‘Then was an error‘);
        });

提供的简化方案： 1：post方式提交数据

              angular.module(‘myApp‘,[])
            .controller(‘myController‘,["$scope","$http",function($scope,$http){
                $scope.fun=function(){
               $http.post(‘data.json‘).success(function(data){
                   alert(data);
               })
            }
            }]);

2：get方式

               angular.module(‘myApp‘,[])
            .controller(‘myController‘,["$scope","$http",function($scope,$http){
                $scope.fun=function(){
               $http.get(‘data.json‘).success(function(data){
                   alert(data);
               })
            }
            }]);

原文：http://www.cnblogs.com/haonantong/p/4662590.html

内容总结

以上是互联网集市为您收集整理的Angular指令全部内容，希望文章能够帮你解决Angular指令所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1290277.html

来源：【匿名】

【下一篇】使用AngularJS和PHP的Laravel实现单页评论的方法

更多 ►

【Angular指令】教程文章相关的互联网学习教程文章

一、指令基础指令1、ng-disabled使用ng-disabled可以把disabled属性绑定到以下表单输入字段上： <input> （ text、 checkbox、 radio、 number、 url , email 、 submit）； <textarea> ； <select> ； <button> 。案例1：<input type="text" ng-disabled="true" placeholder="TypetoEnable">在下面的例子，文本字段会被禁用五秒，直到在$timeout中将isDisabled属性设置为true：<textarea ng-disabled="isDisabled">Wait5seconds</...

AngularJs-指令和指令之间的交互（动感超人）【代码】【图】

前言：　　上节我们学习到了指令和控制器之间的交互，通过给指令添加动作，调用了控制器中的方法。本节我们学习指令和指令之间是如何交互的，我们通过一个小游戏来和大家一起学习，听大漠老师说这是国外的人写的demo，我们可以借鉴学习。1，动感超人上面的三个按钮，代表三个超人，在此想问下，哪些想看超人的朋友们是不是有种被骗了的感觉？当我们的鼠标移动到哪个超人的身上的时候，就会输入这个超人所拥有的超能力（力量 + 敏捷...

angular指令

AngularJS通过使用指令来扩展HTML、为应用程序添加新的功能；允许用户自定义新的指令。AngularJS是扩展了HTML属性，使用格式如下ng-**。AngularJS的指令有ng-app、ng-init、ng-model等，在接下来会一一解释。数据绑定：ng-model和{{}}“”{{}}“”是AngularJS数据绑定的表达式，数据绑定同步了AngularJS表达式和AngularJS数据；如下例子：<div ng-app="" ng-init="quantity=2;price=5"><h2>the sum is:</h2>number:<input type="nu...

AngularJS指令嵌套时变量执行顺序的问题解决办法【代码】

今天研究指令嵌套时，发现子指令的link函数先于父指令的link函数执行。这样和预想的顺序不一样。也就是说，如果子指令的某个scope变量依赖于父指令传来的参数时，可能一直是undefinded比如：APP.directive("子指令", function () { return { scope: {　　　　　　变量A:"=父指令的参数"　　　　　}, restrict: ‘A‘, replace: false, link: function (scope, elem, attr) { scope.变量...

angular指令

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。ng-class 指令的值可以是字符串，对象，或一个数组。如果是字符串，多个类名使用空格分隔。如果是对象，需要使用 key-value 对，key 是一个布尔值，value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。<element ng-class="expression"></element> <!DOCTYPE html><html><head><meta ...

AngularJS 指令ng-click【代码】

元素被点击时调用方法或者表达式：<!doctype html> <html ng-app="myApp"> <head><link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script> </head> <body><div ng-controller="CounterController"><button ng-click="count = count + 1" ng-init="count=0">Increment</button>count: {{count}...

AngularJS指令【代码】【图】

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app="" ng-init="firstName=‘wangshw‘"><p>姓名为 <span ng-bind="firstName"></span></p></div></body> </html> 原文：http://www.cnblogs.com/lnas01/p/5255176.html

关于Angular 指令的理解

之前虽然一直都在用这套框架，但是对于指令还是知之甚少，感觉是蛮复杂的东西。看了之后也没有真正理解。最近在做一个Angular的小项目，卡在了Angular的生命周期和自定义指令上。纠结了好几天，终于今天在地铁上灵光一闪想通了。所以赶紧把它记下来，免得后面忘记了。我们一直都说angular的加载流程是先载入HTML片段，其中在加载<script>标签的时候加载了所有的JS库，包括我们自己写的所有的controller/service/filter以及官方...

--@angularJS--指令与控制器之间的交互demo

1、index.html:<!DOCTYPE HTML><html ng-app="app"><head> <title>custom-directive</title> <meta charset="utf-8"> <link rel="stylesheet" href="../css/bootstrap.css"> <script src="../js/angular.js"></script></head><body><div ng-controller="myCtrl"> <loader>滑动加载</loader></div><script src="./directive-controller.js"></script></body></html>2、di...

AngularJS -- 指令(创建自定义指令)【代码】【图】

什么是指令注:本指南是针对已经熟悉AngularJS基础知识的开发人员。如果你才刚刚开始,我建议查看系列教程。指令是一个Dom元素上的标签(和元素上的属性, CSS 类样式一样，属于这个Dom元素)，它告诉AngualrJS的HTML 编译器($compile)，去附加一个行为到这个Dom元素上去，这个行为可以改变这个Dom元素，或者这个Dom元素的子元素。 AngularJS 有一套自己内置的指令，如：ngBind，ngModel，ngClass等等...你可以自定义的指令。当Angular...

AngularJS 指令【代码】

AngularJS 指令AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。 ng-app 指令ng-app 指令定义了 AngularJS 应用程序的根元素。ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。 ng-init 指令ng-init 指令为 AngularJS 应用程序定义了初始值。通常情况下，不使用 ng-init。使用一个控制器或模块来代替它。 ng-model 指令ng-model 指令绑定 HTML 元素到应用程序数据。ng-model 指令也可以：为应用程序数据提供类...

angular指令监听ng-repeat渲染完成后执行自定义事件方法【代码】

今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作，angular本身并没有提供监听ng-repeat渲染完成的指令，所以需要自己创建自定义指令。在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even，$index会随着每次遍历（从0开始）递增，当遍历到最后一个时，$last的值为true，所以可以通过判断$last的值来监听ng-repeat的执行状态，怎么在遍历过程中拿到$last的值：自定义指令var app = angul...

angular 指令要点解析【代码】【图】

指令可以删繁就简前端的js代码，杜绝重复的js代码和html代码。下面就对指令的重要属性进行罗列一、restrict = ‘AEC‘ 　　分别指该指令标识位于attribute属性、element元素、class、二、scope = true/false/{name:‘=/@/&‘} 　　默认为false，如果设置为true 则说明指令内部独立作用域。　scope: {lover: ‘=‘,name: ‘@‘,say: ‘&‘}　　1、{name:‘@inputName‘} name 指指令中作用域中scope.name ， inputName 可不...

AngularJS 指令表达式应用【代码】

AngularJS 指令AngularJS 指令是以 ng 作为前缀的 HTML 属性。ng-app 指令ng-app 指令定义了 AngularJS 应用程序的根元素。ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。ng-model 指令ng-model 指令绑定 HTML 元素到应用程序数据。ng-model 指令也可以：为应用程序数据提供类型验证（number、email、required）。为应用程序数...

angularjs指令中link方法无法正确获取element【代码】

angularjs中大多在指令之中操作DOM，现在遇到一个指令中无法获取DOM的特殊情况：var directiveCtrl=angular.module("directiveCtrl",[]); directiveCtrl.controller("ctrlTwo",[‘$scope‘,function($scope){ $scope.name="me"; }]); directiveCtrl.directive("num",function(){ return{restrict: ‘E‘,template: ‘<div ng-repeat="i in [1,2]" ng-controller="ctrlTwo">{{name}}</div>‘,replace:true,link:function(sc...

ANGULAR - 技术教程分类

Angular 2 教程 Angular 2 架构 Angular 2 数据显示 Angular 2 用户输入 Angular 2 表单 Angular 2 模板语法 angular 全部

ANGULAR - 最热教程

在Angular中如何实现查询天气预报 AngularJS服务service用法总结 Angular.JS中指令ng-if的注意事项小结 AngularJS 异步解决实现方法使用AngularJS和PHP的Laravel实现单页评...AngularJS控制器继承自另一控制器 spring+angular实现导出excel的实现代码关于AngularJS中ng-repeat不更新视图的...在Angular5中如何调用第三方js插件（详...Angular入口组件与声明式组件使用详解

首页 / ANGULAR / Angular指令

Angular指令

内容导读

内容图文

一、指令

基础指令

1、ng-disabled

2、ng-select

3、ng-options

4、ng-submit

5、ng-app

6、ng-controller

7、ng-switch

8、ng-if

重要：

9、ng-repeat

10、ng-init

11、{{ }}

12、bind绑定

13、ng-cloak

14、ng-bind-template

15、ng-show/ng-hide

16、ng-click

定义指令

1、directive()

这里有个关键的字：howToLoad---当页面上的两个地方都要使用同一个link去做一些业务处理的时候。

模块引入

二、同外界通信： XHR和服务器通信

$http

内容总结

内容备注

内容手机端

【Angular指令】教程文章相关的互联网学习教程文章

ANGULAR - 技术教程分类

ANGULAR - 最新教程

ANGULAR - 最热教程