指令作用域
<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
