15.指令作用域
2017-05-28 本文已影响0人
miner敏儿
指令作用域
<body ng-app='app' ng-controller='zmController'>
<p>{{name}}</p>
<zm></zm>
<script src=angular1.6.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller("zmController",["$scope",function($scope){
//1.
$scope.name = "父控制器的name"
}])
/*2.指令*/
app.directive("zm",function () {
return{
restrict:'EA',
template:'<h1>自定义指令:{{name}}</h1>',
controller:function ($scope) {
},
replace:true,
}
})
</script>
</body>
</html>
image.png
1.scope为bool值
添加input标签 添加ng-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app='app' ng-controller='zmController'>
<input type="text" ng-model="name">
<p>{{name}}</p>
<zm></zm>
<script src=angular1.6.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller("zmController",["$scope",function($scope){
//1.
$scope.name = "父控制器的name"
}])
/*2.指令默认情况和父级使用的是同一个$scope 自己可以去指定作用范围*/
app.directive("zm",function () {
return{
restrict:'EA',
template:'<h1>自定义指令:{{name}}</h1>',
controller:function ($scope) {
//3.
// $scope.name = "123"
},
// scope:true,
/*当指定scope为true时,自己就会独立出来一个作用域,当给子级控制器增加name属性时,只有自身的是改变了 ,就是只有自定义指令的zm中的值改变了 其他的斗没有改变 即使改变input中的值,子级也不会改变.
scope的值为false时,使用的时和父级同一作用域,改了子级的值,父级的值也会改变,改变父级的值,子级的值也会改变.
* */
replace:true,
}
})
</script>
</body>
</html>
a.当为false的时候:
- 子控制器里面没有定义name的时候,使用父控制器的name值,并且当父控制器中的内容改变时,子控制器中的内容也会改变
image.png
- 子控制器里面定义定义name的时候,子级的内容会覆盖父级的内容,但是当修改父级时,子级的内容也会变化
image.png
image.png
b.当指定scope为true
自己就会独立出来一个作用域,子级没有给name赋值时,子级使用值是父级的值,修改父级时子级也会修改
当给子级控制器增加name属性时,子级的值会改变 , 但是父级的值没有改变,即使改变父级的值,子级也不会改变.
image.png
image.png
scope为对象{}
scope值除了是bool之外,还能是一个对象{}
就相当于是一个隔离作用域.如果指令当中用到了属性,会在自己的作用域当中查找,如果有就直接使用,
没有name
- 如果没有.就不显示,它不会到父级当中去查找,并且更改父级中name的值得时候子作用域当中的值不会发生改变
image.png
传入name值
子级的值就在子级显示,不会更改父级的值,当更改父级时子级也不会变化
image.png
指令作用域传递参数
@修饰符
我在外界写了一个content 我想从外界传入一个数据进来,
格式:外界传递参数,使用{{}}来传递
QQ截图20170528110255.png
特点:
- 属于单向的传递,外界修改,内部也会跟着修改
- 内部的修改不会影响外界
- 如果内部当中有该属性,其值会被覆盖掉,使用的值是外界传入的值
QQ截图20170528111148.png
QQ截图20170528111413.png
QQ截图20170528111550.png
QQ截图20170528111925.png
=修饰符
当使用"="传递数据时,不需要{{}} 直接在后面写上要传递的数据即可
<zm content='content' my-title="title"></zm>
特点:
- 属于双向的传递
- 无论那一边进行更改,都会受到影响
QQ截图20170528112747.png
&修饰符
要求外界传递方法进来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app='app' ng-controller='zmController'>
<zm childmethod="paraMethod()" show = "show()"></zm>
<script src=angular1.6.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller("zmController",["$scope",function($scope){
$scope.paraMethod = function () {
alert('我是父控制器的方法')
};
$scope .show = function () {
alert("hello world")
}
//传递给指令,然后指令也就有这些方法
}])
/*指令默认情况和父级使用的是同一个$scope 自己可以去指定作用范围*/
app.directive("zm",function () {
return{
restrict:'EA',
template:'<h1> <button ng-click="click()">我是子级控制器上的点击</button> </h1>',
controller:function ($scope) {
$scope.myTitle = "我是子标题";
$scope.click = function () {
$scope.childmethod();
$scope.show()
}
},
// scope:true,
//我想拿到父控制器的方法
scope:{
childmethod:'&',
show:'&'
},
/*
e.要求外界传递方法进来
d.当使用"="传递数据时,不需要{{}} 直接在后面写上要传递的数据即可
<zm content='content' my-title="title"></zm
replace:true,
}
})
</script>
</body>
</html>
QQ截图20170528113657.png
