脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-指令<AngularJs>，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法：
复制代码
Angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: String,
terminal: Boolean,
template: String or Template Function:
function(tElement, tAttrs) {...},
templateUrl: String,
replace: Boolean or String,
scoPE: Boolean or Object,
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,
require: String,
link: function(scope, iElement, iAttrs) { ... },
compile: // 返回一个对象或连接函数，如下所示：
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
return function postLink(...) { ... }
}
};
});
复制代码
restrict[string]
restrict是一个可选的参数。用于指定该指令在DOM中以何种形式被声明。默认值是A，即以属性的形式来进行声明。
可选值如下：
E（元素）
<my-directive></my-directive>
A（属性，默认值）
<p my-directive="exPression"></p>
C（类名）
<p class="my-directive:expression;"></p>
M（注释）
<--directive:my-directive expression-->
一般考虑到浏览器的兼容性，强烈建议使用默认的属性就可以即即以属性的形式来进行声明。最后一种方式建议再不要求逼格指数的时候千万不要用。
Code:
复制代码
angular.module('app',[])
.directive('myDirective', function () {
return {
restrict: 'E',
template: '<a href="https://www.baidu.COM">百度</a>'
};
})
HtMLCode:
<my-directive></my-directive>
复制代码
效果：
priority[int]
大多数指令会忽略这个参数，使用默认值0，但也有些场景设置高优先级是非常重要甚至是必须的。例如，ngRepeat将这个参数设置为1000，这样就可以保证在同一元素上，它总是在其他指令之前被调用。
terminal[bool]
这个参数用来停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行。
例如：ngIf的优先级略高于ngView（它们操控的实际就是terminal参数），如果ngIf的表达式值为true，ngView就可以被正常执行，但如果ngIf表达式的值为false，由于ngView的优先级较低就不会被执行。
template[string or function]
template参数是可选的，必须被设置为以下两种形式之一：
一段HTML文本；
一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个代表模板的字符串。tElement和tAttrs中的t代表template，是相对于instance的。
首先演示下第二种用法：
复制代码
angular.module('app',[])
.directive('myDirective', function () {
return {
restrict: 'EAC',
template: function (elem, attr) {
return "<a href='" + attr.value + "'>" + attr.text + "</a>";
}
};
})
复制代码
HtmlCode:（效果同上，不做演示了）
<my-directive value="https://www.baidu.com" text="百度"></my-directive>
<p my-directive
value="https://www.baidu.com"
text="百度"></p>
templateUrl[string or function]
templateUrl是可选的参数，可以是以下类型：
一个代表外部HTML文件路径的字符串；
一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件路径的字符串。
无论哪种方式，模板的URL都将通过ng内置的安全层，特别是$getTrustedResourceUrl，这样可以保护模板不会被不信任的源加载。 默认情况下，调用指令时会在后台通过Ajax来请求HTML模板文件。加载大量的模板将严重拖慢一个客户端应用的速度。为了避免延迟，可以在部署应用之前对HTML模板进行缓存。
Code:
复制代码
angular.module('app',[])
.directive('myDirective', function () {
return {
restrict: 'AEC',
templateUrl: function (elem, attr) {
return attr.value + ".html"; //当然这里我们可以直接指定路径，同时在模板中可以包含表达式
}
};
})
复制代码
replace[bool]
replace是一个可选参数，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部,
例如上面的示例默认值情况下，生成的html代码如下：
<my-directive value="https://www.baidu.com" text="百度"><a href="https://www.baidu.com">百度</a></my-directive>
如果设置replace=true
<a href="https://www.baidu.com" value="https://www.baidu.com" text="百度">百度</a>
据我观察，这种效果只有设置restrict="E"的情况下，才会表现出实际效果。
介绍完基本的指令参数后，就要涉及到更重要的作用域参数了...
scope参数[bool or object]
scope参数是可选的，可以被设置为true或一个对象。默认值是false。
如果一个元素上有多个指令使用了隔离作用域，其中只有一个可以生效。只有指令模板中的根元素可以获得一个新的作用域。因此，对于这些对象来说scope默认被设置为true。内置指令ng-controller的作用，就是从父级作用域继承并创建一个新的子作用域。它会创建一个新的从父作用域继承而来的子作用域。这里的继承就不在赘述，和面向对象中的继承基本是一直的。
首先我们来分析一段代码：
复制代码
<p ng-app="app" ng-init="name= '祖父'">
<p ng-init="name='父亲'">
第一代：{{ name }}
<p ng-init="name= '儿子'" ng-controller="SomeController">
第二代： {{ name }}
<p ng-init="name='孙子'">
第三代： {{ name }}
</p>
</p>
</p>
</p>
复制代码
我们发现第一代，我们初始化name为父亲,但是第二代和第三代其实是一个作用域，那么他们的name其实是一个对象，因此出现的效果如下：
第一代：父亲
第二代： 孙子
第三代： 孙子
我们在修改一下代码，把第三代隔离开来再看看效果：
复制代码
<p ng-app="app"ng-init="name= '祖父'">
<p ng-init="name='父亲'">
第一代：{{ name }}
<p ng-init="name= '儿子'" ng-controller="SomeController">
第二代： {{ name }}
<p ng-init="name='孙子'" ng-controller="SecondController">
第三代： {{ name }}
</p>
</p>
</p>
</p>
复制代码
JsCode:
复制代码
angular.module('app', [])
.controller('SomeController',function($scope) {
})
.controller('SecondController', function ($scope) {
})
复制代码
效果如下：
第一代：父亲
第二代： 儿子
第三代： 孙子
在修改下代码来看看继承：
复制代码
<p ng-app="app"ng-init="name= '祖父的吻'">
<p>
第一代：{{ name }}
<p ng-controller="SomeController">
第二代： {{ name }}
<p ng-controller="SecondController">
第三代： {{ name }}
</p>
</p>
</p>
</p>
复制代码
效果如下：
第一代：祖父的吻
第二代： 祖父的吻
第三代： 祖父的吻
如果要创建一个能够从外部原型继承作用域的指令，将scope属性设置为true，简单来说就是可继承的隔离，即不能反向影响父作用域。
再来看个例子：
复制代码
angular.module('myApp', [])
.controller('MainController', function ($scope) {
})
.directive('myDirective', function () {
return {
restrict: 'A',
scope:false,//切换为{}，true测试
priority: 100,
template: '<p>内部:{{ myProperty }}<input ng-model="myProperty"/></p>'
};
});
复制代码
Html代码：
<p ng-controller='MainController' ng-init="myProperty='Hello World!'">
外部: {{ myProperty}}
<input ng-model="myProperty" />
<p my-directive></p>
</p>
当我们改变scope的值我们会发现
false:继承但不隔离
true:继承并隔离
{}：隔离且不继承
transclude
transclude是一个可选的参数。默认值是false。嵌入通常用来创建可复用的组件，典型的例子是模态对话框或导航栏。我们可以将整个模板，包括其中的指令通过嵌入全部传入一个指令中。指令的内部可以访问外部指令的作用域，并且模板也可以访问外部的作用域对象。为了将作用域传递进去，scope参数的值必须通过{}或true设置成隔离作用域。如果没有设置scope参数，那么指令内部的作用域将被设置为传入模板的作用域。
只有当你希望创建一个可以包含任意内容的指令时，才使用transclude: true。
我们来看两个例子-导航栏：
复制代码
<p side-box title="TagCloud">
<p class="tagcloud">
<a href="">Graphics</a>
<a href="">ng</a>
<a href="">D3</a>
<a href="">Front-end</a>
<a href="">Startup</a>
</p>
</p>
复制代码
JsCode:
复制代码
angular.module('myApp', [])
.directive('sideBox', function() {
return {
restrict: 'EA',
scope: {
title: '@'
},
transclude: true,
template: '<p class="sidebox"><p class="content"><h2 class="header">' +
'{{ title }}</h2><span class="content" ng-transclude></span></p></p>'
};
});
复制代码
这段代码告诉ng编译器，将它从DOM元素中获取的内容放到它发现ng-transclude指令的地方。
再来你看个官网的例子：
复制代码
angular.module('docsIsoFnBindExample', [])
.controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
$scope.name = 'Tobias';
$scope.hideDiaLOG = function () {
$scope.dialogIsHidden = true;
$timeout(function () {
$scope.dialogIsHidden = false;
}, 2000);
};
}])
.directive('myDialog', function() {
return {
restrict: 'E',
transclude: true,
scope: {
'close': '&onClose'
},
templateUrl: 'my-dialog-close.html'
};
});
复制代码
my-dialog-close.html
<p class="alert">
<a href class="close" ng-click="close()">×</a>
<p ng-transclude></p>
</p>
index.html
<p ng-controller="Controller">
<my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()">
Check out the contents, {{name}}!
</my-dialog>
</p>
如果指令使用了transclude参数，那么在控制器无法正常监听数据模型的变化了。建议在链接函数里使用$watch服务。
controller[string or function]
controller参数可以是一个字符串或一个函数。当设置为字符串时，会以字符串的值为名字，来查找注册在应用中的控制器的构造函数.
angular.module('myApp', [])
.directive('myDirective', function() {
restrict: 'A',
controller: 'SomeController'
})
可以在指令内部通过匿名构造函数的方式来定义一个内联的控制器
复制代码
angular.module('myApp',[])
.directive('myDirective', function() {
restrict: 'A',
controller:
function($scope, $element, $attrs, $transclude) {
// 控制器逻辑放在这里
}
});
复制代码
我们可以将任意可以被注入的ng服务注入到控制器中，便可以在指令中使用它了。控制器中也有一些特殊的服务可以被注入到指令当中。这些服务有：
1. $scope
与指令元素相关联的当前作用域。
2. $element
当前指令对应的元素。
3. $attrs
由当前元素的属性组成的对象。
<p id="aDiv"class="box"></p>
具有如下的属性对象：
{
id: "aDiv",
class: "box"
}
4. $transclude
嵌入链接函数会与对应的嵌入作用域进行预绑定。transclude链接函数是实际被执行用来克隆元素和操作DOM的函数。
复制代码
angular.module('myApp',[])
.directive('myLink', function () {
return {
restrict: 'EA',
transclude: true,
controller:
function ($scope, $element,$attrs,$transclude) {
$transclude(function (clone) {
VAR a = angular.element('<a>');
a.attr('href', $attrs.value);
a.text(clone.text());
$element.append(a);
});
}
};
});
复制代码
html
<my-link value="https://www.baidu.com">百度</my-link>
<p my-link value="https://www.GOOGLE.com">谷歌</p>
仅在compile参数中使用transcludeFn是推荐的做法。link函数可以将指令互相隔离开来，而controller则定义可复用的行为。如果我们希望将当前指令的API暴露给其他指令使用，可以使用controller参数，否则可以使用link来构造当前指令元素的功能性（即内部功能）。如果我们使用了scope.$watch()或者想要与DOM元素做实时的交互，使用链接会是更好的选择。使用了嵌入，控制器中的作用域所反映的作用域可能与我们所期望的不一样，这种情况下，$scope对象无法保证可以被正常更新。当想要同当前屏幕上的作用域交互时，可以使用传入到link函数中的scope参数。
controllerAs[string]
controllerAs参数用来设置控制器的别名，这样就可以在视图中引用控制器甚至无需注入$scope。
<p ng-controller="MainController as main">
<input type="text" ng-model="main.name" />
<span>{{ main.name }}</span>
</p>
JsCode:
angular.module('myApp',[])
.controller('MainController', function () {
this.name = "Halower";
});
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-指令<AngularJs>全部内容，希望文章能够帮你解决javascript代码实例教程-指令<AngularJs>所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。