你的位置:首页 > 软件开发 > Java > AngularJS之指令

AngularJS之指令

发布时间:2016-08-11 00:00:35
紧接上篇博客“初探AngularJS”一、前言在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番。如有错误,请不吝讲解。好了,言归正传,让我们一起走进Angular指令的世界。在上篇博客的前言部分提到,Angular的核 ...

AngularJS之指令

紧接上篇博客“初探AngularJS”

一、前言

在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番。如有错误,请不吝讲解。

好了,言归正传,让我们一起走进Angular指令的世界。

在上篇博客的前言部分提到,Angular的核心就是对HTML标签的增强。我们用到的诸如ng-app、ng-controller等等这些都是属于Angular指令,具体点,它们为Angular内置的指令。

Angular不仅提供了内置指令,它还允许我们自定义指令,不然Angular就太low咯。

这也是本篇博客的核心:如何自定义指令。

二、自定义指令

Angular为我们提供了.directive()这个方法,来定义指令。

如下:

AngularJS之指令

正如上述代码所示,directive方法接受两个参数:name和factory_function。

  --name嘛,即为指令的名字,供我们调用时使用;

  --factory_function就是当我们调用指令时,指令的实际行为,并且factory_function通常返回一个对象,里面通过规定的设置项来定义指令。

那么自定义指令中,我们都可以操作哪些设置项呢?

如下:

AngularJS之指令AngularJS之指令
var app = angular.module('myApp', []);app.directive('myDirective', function(){        return {    restrict: 'EACM',//告诉AngularJS这个指令在DOM中以何种形式被声明,默认为A    priority: Number,//优先级参数(值为数值),数值越大,优先级越高,默认为0    terminal: Boolean,//true或者false,告诉AngularJS是(true)否(false)停止运行当前元素上比本指令优先级低的指令    template: String or Template Function,//模板    templateUrl: String,//模板URL    replace: Boolean,//值为true,代表模板会替换掉调用该指令的元素    scope: Boolean or Object,//指令作用域    transclude: Boolean,//true,结合ng-transclude,在该指令中嵌入内容    controller: String or function($scope, $element, $attrs, $transclude, otherInjectables){...},//指令控制器    controllerAs: String,//用来设置控制器的别名    require: String,//将控制器注入到其值所指定的指令中    link: function(scope, element, attrs){...},    compile: function(){}          };});

原标题:AngularJS之指令

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。