angularjs自定义指令（angularjs自定义指令总结）

25-02-26 14

在这篇文章中，我们将带领您了解angularjs自定义指令的全貌，包括angularjs自定义指令总结的相关情况。同时，我们还将为您介绍有关Angular.js自定义指令学习笔记实例、AngularJ

在这篇文章中，我们将带领您了解angularjs自定义指令的全貌，包括angularjs自定义指令总结的相关情况。同时，我们还将为您介绍有关Angular.js自定义指令学习笔记实例、AngularJS - 自定义指令、AngularJS —— 自定义指令、AngularJS 世界------Angularjs指令的使用方式和自定义指令的知识，以帮助您更好地理解这个主题。

本文目录一览：

angularjs自定义指令（angularjs自定义指令总结）
Angular.js自定义指令学习笔记实例
AngularJS - 自定义指令
AngularJS —— 自定义指令
AngularJS 世界------Angularjs指令的使用方式和自定义指令

angularjs自定义指令（angularjs自定义指令总结）

app.directive('nameunique',function($http) {
return {
require: 'ngModel',//require代表另一个指令的名字，它将会作为link函数的第四个参数
//参数说明 scope:指令需要监听的作用域,ele:指令所在的元素,attrs:有声明在当前元素上的属性列表,ngmodelController:控制器实例，也就是当前指令通过require请求的指令内部的controller
link: function(scope,ele,attrs,ngmodelController) {
scope.$watch(attrs.ngModel,function(n) {//n为监控的值，此处就是attrs.ngModel
if(!n){
return;
}
$http({
method: 'POST',
url: 'url',
data: 'name='+ $('#name').val(),
headers : {
'Content-Type' : ''
}
}).success(function(data) {
if(data.data.length==0){
ngmodelController.$setValidity('nameunique',true);
}
else{
//已存在用户名，$invalid为true
ngmodelController.$setValidity('nameunique',false);
}
}).error(function(data) {
ngmodelController.$setValidity('nameunique',false);
});
});
}
};

});

用于检测用户名唯一的指令

Angular.js自定义指令学习笔记实例

本文给大家分享angular.js学习笔记之自定义指令实例代码讲解，具体代码如下所示：

rush:js;"> <Meta charset="UTF-8"> AngularDirective

以上所述是小编给大家介绍的Angular.js自定义指令的实例代码。小编 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得小编不错，可分享给好友！感谢支持。

AngularJS - 自定义指令

这一篇从自定义指令出发，记录了定义一个指令时影响指令行为的各种因素。

试着感受这些因素，让自己更高效地编写AngularJS应用。

Directive

先从定义一个简单的指令开始。
定义一个指令本质上是在HTML中通过元素、属性、类或注释来添加功能。

AngularJS的内置指令都是以ng开头，如果想自定义指令，建议自定义一个前缀代表自己的命名空间。

这里我们先使用my作为前缀:

var myApp = angular.module(''myApp'', [])
    .directive(''myDirective'', function() {
    return {
        restrict: ''A'',
        replace: true,
        template: ''<p>Kavlez</p>''
    };
})

如此一来，我们可以这样使用，注意命名是camel-case:

<my-directive />
<!-- <my-directive><p>Kavlez</p></my-directive> -->

directive()接受两个参数

name：字符串，指令的名字
factory_function：函数，指令的行为

应用启动时，以name作为该应用的标识注册factory_function返回的对象。

在factory_function中，我们可以设置一些选项来改变指令的行为。

下面记录一下定义指令时用到的选项

restrict （string）

该属性用于定义指令以什么形式被使用，这是一个可选参数，本文开头定义的指令用的也是A，其实该选项默认为A。

也就是元素（E）、属性（A）、类（C）、注释（M）

(ps:EMAC? EMACS? 挺好记哈)

比如上面定义的myDirective，可以以任何形式调用。

E（元素）

    <my-directive></my-directive>

A（属性，默认值）

    <div my-directive="expression"></div>

C（类名）

    <div></div>

M（注释）

    <--directive:my-directive expression-->

priority (Number)

也就是优先级，默认为0。

在同一元素上声明了多个指令时，根据优先级决定哪个先被调用。

如果priority相同，则按声明顺序调用。

另外，no-repeat是所有内置指令中优先级最高的。

terminal (Boolean)

终端? 而且还是Boolean?

被名字吓到了，其实terminal的意思是是否停止当前元素上比该指令优先级低的指令。
但是相同的优先级还是会执行。

比如，我们在my-directive的基础上再加一个指令:

.directive(''momDirective'',function($rootScope){
    return{
        priority:3,
        terminal:true
    };
})

调用发现my-directive不会生效:

<div mom-directive my-directive="content" ></div>

template (String/Function)

至少得输出点什么吧? 但template也是可选的。

String类型时，template可以是一段HTML。

Function类型时，template是一个接受两个参数的函数，分别为：

tElement
tAttrs

函数返回一段字符串作为模板。

templateUrl (String/Function)

这个就和上面的template很像了，只不过这次是通过URL请求一个模板。
String类型时，templateURL自然是一个URL。
Function类型时返回一段字符串作为模板URL。

replace (Boolean/String)

默认值为false，以文章开头定义的指令为例，假设我们这样调用了指令

<my-directive></my-directive>

replace为true时，输出:

<p>Kavlez</p>

replace为false时，输出:

<my-directive><p>Kavlez</p></my-directive>

transclude (Boolean)

该选项默认为false，翻译过来叫''嵌入''，感觉还是有些生涩。

template和scope已经可以做很多事情了，但有一点不足。

比如在原有元素的基础上添加内容，transclude的例子如下:

<body ng-app="myApp">
    <textarea ng-model="content"></textarea>
    <div my-directive title="Kavlez">
        <hr>
        {{content}}
    </div>
</body>
<script type="text/javascript">
var myApp = angular.module(''myApp'', [])
.directive(''myDirective'', function() {
    return {
        restrict: ''EA'',
        scope: {
            title: ''@'',
            content: ''=''
        },
        transclude: true,
        template: ''<h2>{{ title }}</h2>\
        <spanng-transclude></span>''
    };
});
</script>

发现div下的hr并没有被移除，就是这样的效果。

注意不要忘了在模板中声明ng-transclude。

scope (Boolean/Object)

默认为false，true时会从父作用域继承并创建一个自己的作用域。

而ng-controller的作用也是从父作用域继承并创建一个新的作用域。

比如这样，离开了自己的作用域就被打回原形了:

<div ng-init="content=''from root''">
    {{content}}
    <div ng-controller="AncestorController">
        {{content}}     
        <div ng-controller="ChildController">
            {{content}}     
        </div>
        {{content}} 
    </div>
    {{content}} 
</div>

.controller(''ChildController'', function($scope) {
    $scope.content = ''from child'';
})
.controller(''AncestorController'', function($scope) {
    $scope.content = ''from ancestor'';
})

但不要误解，指令嵌套并不一定会改变它的作用域。

既然true时会从父作用域继承并创建一个自己的作用域，那么我们来试试改为false会是什么样子:

<div ng-init="myProperty=''test''">
    {{ myProperty }}
    <div my-directive ng-init="myProperty = ''by my-directive''">
        {{ myProperty }}
    </div>
    {{ myProperty }}
</div>

.directive(''myDirective'', function($rootScope) {
    return {
        scope:false
    };
})

显然，结果是三行''by my-directive''。

非true即false? naive!

其实最麻烦的还是隔离作用域，

我们稍微改动一下myDirective，改为输出<p>{{内容}}</p>。

于是我试着这样定义:

<body ng-app="myApp" >
    <p ng-controller="myController">
    <div my-directive="I have to leave." ></div>
        {{myDirective}}
    </p>
</body>
<script type="text/javascript">
var myApp = angular.module(''myApp'', [])
.directive(''myDirective'', function($rootScope) {
    $rootScope.myDirective = ''from rootScope'';
    return {
        priority:1000,
        restrict: ''A'',
        replace: true,
        scope: {
            myDirective: ''@'',
        },
        template: ''<p>{{myDirective}}</p>''
    };
})
.controller(''myController'',function($scope){
    $scope.myDirective = ''from controller'';
});
</script>

这里需要注意的不是@，重点是隔离作用域。

根据上面的例子输出，template中的{{myDirective}}不会影响到其他作用域。

我们再试试这样:

<input type="text" ng-model="content">
<p ng-controller="myController" >
<div my-directive="{{content}}" ></div>
    {{content}}
</p>

发现大家都在一起变，也就是说值是通过复制DOM属性并传递到隔离作用域。

ng-model是个强大的指令，它将自己的隔离作用域和DOM作用域连在一起，这样就是一个双向数据绑定。

如何向指令的隔离作用域中传递数据，这里用了@。

或者也可以写成@myDirective，也就是说换个名字什么的也可以，比如我用@myCafe什么的给myDirective赋值也是没问题的，总之是和DOM属性进行绑定。

另外，我们也可以用=进行双向绑定，将本地作用域的属性同父级作用域的属性进行双向绑定。

比如下面的例子中，隔离作用域里的内容只能是''abc'' :

<body ng-app="myApp" ng-init="content=''abc''">
    <p ng-controller="myController" >
        <input type="text" ng-model="content">
        <div my-directive="content" ></div>
        {{content}}
    </p>
</body>
<script type="text/javascript">
var myApp = angular.module(''myApp'', [])
.directive(''myDirective'', function($rootScope) {
    return {
        priority:1000,
        restrict: ''A'',
        replace: true,
        scope: {
            myDirective: ''='',
        },
        template: ''<p>from myDirective:{{myDirective}}</p>''
    };
})  
.controller(''myController'',function($scope){
    $scope.content = ''from controller'';
});
</script>

在隔离作用域访问指令外部的作用域的方法还有一种，就是&。

我们可以使用&与父级作用域的函数进行绑定，比如下面的例子:

<body ng-app="myApp">
    <div ng-controller="myController">
        <table border=''1''>
            <tr>
                <td>From</td>
                <td><input type="text" ng-model="from"/></td>
            </tr>
            <tr>
                <td>To</td>
                <td><input type="text" ng-model="to"/></td>
            </tr>
            <tr>
                <td>Content</td>
                <td><textarea cols="30" rows="10" ng-model="content"></textarea></td>
            </tr>
            <tr>
                <td>Preview:</td>
                <td><div scope-example to="to" on-send="sendMail(content)" from="from" /></td>
            </tr>
        </table>
    </div>
</div>

</body>
<script type="text/javascript">
var myApp = angular.module(''myApp'', [])
.controller(''myController'',function($scope){
    $scope.sendMail=function(content){
        console.log(''content is:::''+content);
    }
})
.directive(''scopeExample'',function(){
    return{
        restrict:''EA'',
        scope: {
            to: ''='', 
            from: ''='' ,
            send: ''&onSend''
        },
        template:''<div>From:{{from}}<br>\
        To:{{to}}<br>\
        <button ng-click="send()">Send</button>\
        </div>''
    }
})
</script>

controller (String/Function)

控制器也可以在指令里定义，比如:

.directive(''myDirective'', function() {
    restrict: ''A'',
    controller: ''myController''
}).controller(''myController'', function($scope, $element, $attrs,$transclude) {
    //...
})

相同的效果，也可以这样声明:

directive(''myDirective'', function() {
    restrict: ''A'',
    controller:function($scope, $element, $attrs, $transclude) {
        //...
    }
});

controllerAs (String)

可以从名字和类型看出，这个选项是用来设置控制器的别名的。

比如这样:

directive(''myDirective'', function() {
    restrict: ''A'',
    controller:function($scope, $element, $attrs, $transclude) {
        //...
    }
});

compile (Object/Function)

虽说这个东西不是很常用吧，但却是值得了解的选项。

compile和link，这两个选项关系到AngularJS的生命周期。

先在这里简单记录一下我对生命周期的认识。

应用启动前，所有的指令以文本的形式存在。* 应用启动后便开始进行compile和link，DOM开始变化，作用域与HTML进行绑定。* 在编译阶段，AngularJS会遍历整个HTML并处理已声明的指令。
一个指令的模板中可能使用了另外一个指令，这个指令的模板中可能包含其他指令，如此层层下来便是一个模板树。* 在DOM尚未进行数据绑定时对DOM进行操作开销相对较小，这时像ng-repeat之类的指令对DOM进行操作则再合适不过了。
我们可以用编译函数访问编译后的DOM，在数据绑定之前用编译函数对模板DOM进行转换，编译函数会返回模板函数。
也就是说，设置compile函数的意义在于:在指令和实时数据被放到DOM中之前修改DOM。
此时完全可以毫无顾虑地操作DOM。
接着我们便可以进入下一个阶段，链接阶段。
最后，模板函数传递给指令指定的链接函数，链接函数对作用域和DOM进行链接。

好了，接下来我们就试试compile:

<body ng-app="myApp">
    <my-directive ng-model="myName"></my-directive>
</body>
<script type="text/javascript">
var myApp = angular.module(''myApp'', [])
.directive(''myDirective'', function($rootScope) {
    $rootScope.myName = ''Kavlez'';
    return {
        restrict: ''EA'',
        compile:function(tEle, tAttrs, transcludeFn) {
            var h2 = angular.element(''<h2></h2>'');
            h2.attr(''type'', tAttrs.type);
            h2.attr(''ng-model'', tAttrs.ngModel);
            h2.html("hello {{"+tAttrs.ngModel+"}}");
            tEle.replaceWith(h2);
        }
    };
});
</script>

原文出处 AngularJS - 自定义指令

AngularJS —— 自定义指令

如何自定义指令：

　　Angular是基于模块的框架，因此上来肯定要创建一个自己的模块：

var myAppModule = angular.module("myApp",[]);

　　然后在此模块基础上创建指令directive

myAppModule.directive("xingoo",function(){
                return{
                    restrict:''AECM'',
                    template:''<div>hello my directive</div>'',
                    replace:true
                }
            });

　　其中，xingoo是我们自定义标签的名字，后面跟着它的方法函数。

　　函数return了一个键值对组合，其中定义了标签的使用方法、属性等等内容。

　　那么看看它都定义了哪些内容吧：

　　1 restrict：定义了标签的使用方法，一共四种，分别是AECM

　　2 template：定义标签的模板。里面是用于替换自定义标签的字符串

　　3 replace：是否支持替换

　　4 transclude：是否支持内嵌

　　如何使用指令：

　　上面提到了标签的四种使用方法，即AECM。

　　A attribute属性：当做属性来使用

<div xingoo></div>

　　E element元素：当做标签元素来使用

<xingoo></xingoo>

　　C class类：当做CSS样式来使用

<div></div>

　　M comments注释：当做注释使用（这种方式在1.2版本下亲测不可用！）

<!-- directive:xingoo -->
<div></div>

　　一般来说推荐，当做属性和元素来使用。

　　当想要在现有的html标签上扩展属性时，采用属性的方式。

　　当想要自定义标签时，采用标签的形式。

　　想要使用那种方式，必须要在定义directive中的restrict里面声明对应的字母。

　　指令的内嵌使用：

　　因为标签内部可以嵌套其他的标签，因此想要在自定义标签中嵌套其他的元素标签，则需要：

　　1 使用transclude属性，设置为true。

　　2 并使用ng-transclude属性，定义内部嵌套的位置。

　　代码如下：

myAppModule.directive("test",function(){
                return{
                    restrict:''AECM'',
                    transclude:true,
                    template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
                }
            });

　　全部代码

<!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>
        
        <xingoo></xingoo>
        <div xingoo></div>
        <div></div>
        <!-- directive:xingoo -->
        <div></div>
        <hr>
        <xingoo>3333</xingoo>
        <hr>
        <test>4444</test>


        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);

            myAppModule.directive("xingoo",function(){
                return{
                    restrict:''AECM'',
                    template:''<div>hello my directive</div>'',
                    replace:true
                }
            });

            myAppModule.directive("test",function(){
                return{
                    restrict:''AECM'',
                    transclude:true,
                    template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
                }
            });
        </script>
    </body>
</html>

　　运行结果

AngularJS 世界------Angularjs指令的使用方式和自定义指令

AngularJS 通过被称为 指令 的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。

AngularJS 内置指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
例如之前用过的几个指令：
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
基本的指令内容可以参考angularjs指令手册

<div ng-app="" ng-init="blogname='艾斯博弈'"> <p>在输入框中尝试输入：</p> <p>姓名：<input type="text" ng-model="blogname"></p> <p>你输入的为： {{ blogname}}</p> </div>

数据绑定

数据绑定是angularjs有一个重要的特性
上面实例中的 {{ blogname}} 表达式是一个 AngularJS 数据绑定表达式。
AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。
{{ blogname}} 是通过 ng-model=”blogname” 进行同步。

重复 HTML 元素

ng-repeat 指令会重复一个 HTML 元素：

<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div>

总结以上几个指令

ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
稍后您将学习到 ng-app 如何通过一个值（比如 ng-app=”myModule”）连接到代码模块。

@H_301_147@ng-init 指令

ng-init 指令为 AngularJS 应用程序定义了初始值。
通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
稍后您将学习更多有关控制器和模块的知识。

ng-model 指令

ng-model 指令绑定 HTML 元素到应用程序数据。
ng-model 指令也可以：
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

ng-repeat 指令

ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。

创建自定义的指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTMl 元素上需要添加自定义指令名。
*使用驼峰法来命名一个指令， iceboyDirective,
但在使用它时需要以 - 分割,iceboy-directive；
*自定义指令可以通过多种方式来进行调用，
也可以限制你的指令只能通过特定的方式来调用，
如：元素名、属性、类名、注释
restrict 值可以是以下几种:
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用，需要增加 replace : true,
restrict 默认值为 EACM,即可以通过元素名、属性名、类名和注释来调用指令。

<body ng-app="myApp">
<iceboy-directive></iceboy-directive>
<div iceboy-directive></div>
<div class="iceboy-directive"></div>
<!-- directive: iceboy-directive -->
<script> var app = angular.module("myApp",[]); app.directive("iceboyDirective",function() { return { restrict : "EACM",replace : true,template : "<h1>MySelf-Directive!</h1>" }; }); </script>
</body>

关于angularjs自定义指令和angularjs自定义指令总结的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于Angular.js自定义指令学习笔记实例、AngularJS - 自定义指令、AngularJS —— 自定义指令、AngularJS 世界------Angularjs指令的使用方式和自定义指令的相关知识，请在本站寻找。

本文标签：