Angular.JS中指令的参数有哪些

Angular.JS中指令的参数有哪些？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

成都创新互联公司专注于企业成都营销网站建设、网站重做改版、遂平网站定制设计、自适应品牌网站建设、HTML5、商城网站建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为遂平等各大城市提供网站开发制作服务。

指令的参数

angular.module('app', [])
.directive('myDirective', function() {
 return {
 restrict: String, 
 priority: Number,
 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(...) { ... }
 }
 };
 });

把它们分成三类：

描述指令或DOM本身特性的内部参数
连接指令外界、与其他指令或控制器沟通的对外参数
描述指令本身行为的行为参数

内部参数

restrict：String，E（元素） A（属性，默认值）
C（类名）
M（注释）<--directive:my-directive expression-->
priority: Number，指令执行优先级
template: String，指令链接DOM模板，例如“
{{head}}
”
templateUrl:String，DOM模板路径
replace: Boolean，指令链接模板是否替换原有元素，

对外参数——scope

scope参数非常重要，本应该是放到最后说明的，但是scope却是理解其他参数的关键，所以务必先跟大家说清楚。

scope参数的作用是，隔离指令与所在控制器间的作用域、隔离指令与指令间的作用域。

scope参数是可选的，默认值为false，可选true、对象{}；

false：共享父域
true：继承父域，且新建独立作用域
对象{}：不继承父域，且新建独立作用域

false、true、{}三者对比

来看个例子


 
 指令scope参数——false、true、{}对比测试
 parent:
 
  {{parentName}}

false参数

本质：子域与父域共享作用域。

特点：父域修改parentName的同时，指令绑定的parentName的元素会被刷新。

Angular.JS中指令的参数有哪些

反之，指令内部parentName被修改时，父域的parentName同样会被刷新。

Angular.JS中指令的参数有哪些

true参数

本质：子域继承父域，并建立独立作用域。

特点：

1、在指令已声明parentName的情况下，父域parentName变更，指令中parentName不会发生变化。
指令在true参数下，建立了的scope，独立并隔离与父控制器的scope。

controller: function ($scope) {
 $scope.parentName = "parent";
}

Angular.JS中指令的参数有哪些

反之，指令中parentName变更，父域也不会发生变化。

Angular.JS中指令的参数有哪些

2、在指令未声明parentName的情况下，父域的parentName变更，指令中parentName也会刷新
这种情况很多时候会被忽略，指令的scope没有声明对象时，其元素绑定的仍然是父域的对象。但，一旦指令中Input变更了，对应的独立scope也会自动声明该绑定对象，这就回到了第1种情况。

controller: function ($scope) {
 //$scope.parentName = "parent";
}

Angular.JS中指令的参数有哪些

然而，指令中parentName变更，父域是不会变化的；

Angular.JS中指令的参数有哪些

3、在指令已声明parentName的情况下，在指令中监听父域parentName 的变化无效。但监听子域parentName的变化有效
独立子域scope，只能监听自己的，不能监听父域的。但通过 $scope.$parent可以监听父域。

controller: function ($scope) {
 $scope.parentName = "parent" ;

 //已声明的情况下，$scope.$watch监听的是自己的parentName
 $scope.$watch( 'parentName' , function (n, o) {
 console.log("child watch" + n);
 });

 //$scope.$parent.$watch监听的是父域的parentName
 $scope.$parent.$watch( 'parentName' , function (n, o) {
 console.log("parent watch" + n);
 });
}

Angular.JS中指令的参数有哪些

4、在指令未声明parentName的情况下，在指令中监听父域parentName的变化有效。

这里就不解释了，参考第2点，大家可以动手试一下。

controller: function ($scope) {
 //$scope.parentName = "parent";

 //未声明的情况下，$scope.$watch监听的是父域的parentName
 $scope.$watch('parentName' , function (n, o) {
 console.log("child watch" + n);
 });
}

对象{}参数

本质：子域不继承父域，并建立独立作用域。

特点：

1、当scope对象为空对象时，无论是父域parentName，还是指令子域parentName发生变更，都不会影响到对方。
原理很清楚，就是指令建立的独立作用域，与父域是完全隔离的。

scope: {}

Angular.JS中指令的参数有哪些

2、当scope对象为非空对象时，指令会将该对象处理成子域scope的扩展属性。而父域与子域之间传递数据的任务，就是可以通过这块扩展属性完成。


 parent:
 {{name}}
 {{sexy}}
 {{age}}

var app = angular.module("app" , []); app.directive( 'stu1' , function () { return { restrict: 'E' , template: "

" , link: function (scope) { console.log( 'stu1 running' ); } }; }); app.directive( 'stu2' , function () { return { restrict: 'E' , template: "

" , link: function (scope) { console.log( 'stu2 running' ); } }; }); app.directive( 'stu3' , function () { return { restrict: 'E' , template: "

" , link: function (scope) { console.log( 'stu3 running' ); } }; }); console output stu3 running stu2 running stu1 running

link: function (scope, element, attr, ctrl) { element.bind("click", function () { console.log("绑定点击事件"); }); element.append("

增加段落块

"); //设置样式 element.css("background-color", "yellow"); //不推荐，在link中赋予scope行为 scope.hello = function () { console.log("hello"); }; }

大橙子网站建设，新征程启航

Angular.JS中指令的参数有哪些

{{head}}

指令scope参数——false、true、{}对比测试

其他资讯