自定义指令问题
2017-06-03 本文已影响7人
MGd
- 每自定义一个指令，都会有自己的作用域。
-
默认情况下，指令当中的作用域与父作用域是同一个 （$scope就是同一个）
父作用域的值发生变化，子作用域的值也发生变化。子作用域的值发生变化，父作用域也发生变化。
-
非默认情况下，可以指定scope。scope值可以是bool 还可以是对象｛｝。
-
当scope值是bool，为true时。
- 代表的是独立作用域。第一次，父修改会影响子，一旦子作用域修改过之后，就变成独立作用域。
- 互相不影响，如果子作用域没有 ，会默认找父作用。
-
当scope值是bool，为false时（默认情况）
- 使用的是同一个作用域，要改大家一起改。
//1.创建模板
var app = angular.module('app', []);
//2.创建控制器
app.controller('xmgController', ['$scope', function ($scope) {
$scope.name = "我是父控制器的name";
}]);
app.directive('xmg',function () {
return {
restrict:'EA',
template:'<h1>{{name}}</h1><input type="text" ng-model="name">',
controller:function ($scope) {
},
scope:false
}
});
</script>
</head>
<body ng-app="app" ng-controller="xmgController"> //父作用域
<input type="text" ng-model="name">
<hr>
<div xmg></div> //子作用域 <h1>{{name}}</h1><input type="text" ng-model="name">
</body>
-
当scope值是对象的时候
scope:{
}
当scope值是对象的时候，并且什么都不传入。
- 隔离作用域，没有也会不找父作用域。
-
当使用@修饰时
- 外界可以传递数据到指令内部作用域。（父作用域中的值add/name/fatherAge传入到指令作用域中）
- 把要传递的数据写到{}里面
- 单项传递
1.当使用@修饰时，传递数据必须得要使用插值语法{{父控制器的属性}}
<div xmg age="{{fatherAge}}" address="{{}}">
2.@特点：父作用域修改，子作用域也会修改，子作用域修改，不会影响父作用域。
//1.创建模板
var app = angular.module('app', []);
//2.创建控制器
app.controller('xmgController', ['$scope', function ($scope) {
$scope.name = "我是父控制器的name";
$scope.fatherAge = 'father传入的fatherAge';
$scope.add = "我是父控制器的add";
}]);
app.directive('xmg',function () {
return {
restrict:'EA',
template:'<input type="text" ng-model="age"><p>{{age}}</p><p>{{address}}</p>',
controller:function ($scope) {
$scope.name = "我是指令name";
},
scope:{
age:'@',
address:'@'
}
}
});
</script>
</head>
<body ng-app="app" ng-controller="xmgController">
<input type="text" ng-model="fatherAge">
<p>{{fatherAge}}</p>
<hr>
// 外界可以传递数据到指令内部作用域。
<div xmg age="{{fatherAge}}" address="{{add}}"></div>
</body>
-
当使用=修饰时
- 1.外界传递数据时不用使用插值语法 直接跟属性名称即可
<div xmg age="父属性名称" address="父属性名称"></div> - 2.=特点:父作用域改变，子作用随着改变。子作用域的改变也会影响到父作用的属性。
- 属性的双向传递
//1.创建模板
var app = angular.module('app', []);
//2.创建控制器
app.controller('xmgController', ['$scope', function ($scope) {
$scope.name = "我是父控制器的name";
$scope.fatherAge = 'father传入的fatherAge';
$scope.add = "我是父控制器的add";
}]);
app.directive('xmg',function () {
return {
restrict:'EA',
template:'<input type="text" ng-model="age"><p>{{age}}</p><p>{{address}}</p>',
controller:function ($scope) {
$scope.name = "我是指令name";
},
scope:{
age:'=',
address:'='
}
}
});
</script>
</head>
<body ng-app="app" ng-controller="xmgController">
<input type="text" ng-model="fatherAge">
<p>{{fatherAge}}</p>
<hr>
<div xmg age="fatherAge" address="add"></div>
</body>
-
当使用&修饰时
- 代表外界传送一个方法进来（父作用域传递方法到子作用域），不会传送属性。
//1.创建模板
var app = angular.module('app', []);
//2.创建控制器
app.controller('xmgController', ['$scope', function ($scope) {
//父作用域的方法（注意！！！！！！！！！！！！）
$scope.fatherMothod = function () {
alert('执行了父方法fatherMothod');
}
}]);
app.directive('gxq',function () {
return {
restrict:'EA',
template:'<h1>{{name}}</h1> <p ng-click="show()">点我</p>',
controller:function ($scope) {
},
scope:{
name:'@',
age:'=',
show:'&'
}
}
});
</script>
</head>
<body ng-app="app" ng-controller="xmgController">
//父作品用域的方法fatherMothod()通过&修饰符传递到子作用域（注意！！！！！）
<div gxq name="{{name}}" age="fatherAge" show="fatherMothod()"></div>
//这里的fatherAge属性不会传递过来。（注意！！！！！！！！）
</body>
-
directive（自定义指令）中cotroller/link
- cotroller一般都是处理业务逻辑
- link一般都是处理dom元素
//1.创建模板
var app = angular.module('app', []);
//2.创建控制器
app.controller('xmgController', ['$scope', function ($scope) {
}]);
app.directive('gxq',function () {
return {
restrict:'EA',
template:'<div><h1 ng-click="hello()">hello</h1></div>',
replace:true,
controller:function ($scope) { //一般都是处理业务逻辑
},
link:function ($scope,ele,attr) { //一般都是处理dom元素。
var res = attr.xmgshow;
if (res == 'false'){
ele.css({
'display':'none'
});
}
},
}
});
</script>
</head>
<body ng-app="app" ng-controller="xmgController">
<gxq xmgshow="false"></gxq>
- link中的ele代表的是<div><h1 ng-click="hello()">hello</h1></div>
- link中的attr代表的是里面的属性
