指令@修飾符
1.作用域
- 我們可以利用修飾符,讓父級傳入一些常量，或者變量到自己的作用域。
@修飾符:
- 1.@修飾符格式:
<指令名 子級屬性="{{變量或者常量}}"></指令名>
<sk666 my-title="{{title}}"></sk666>
- 2.注意:外界傳遞參數,傳的是常量, 用{{}}
- 3.@修飾符特點: 單行傳遞 , 父級->子級 . 父級修改屬性會影響子級, 子級修改不影響父級
- 4.從外界傳入一屬性的值, 傳入的屬性值會覆蓋子級自己屬性
<body ng-app="app" ng-controller="skController">
<p>{{name}}</p>
<input type="text" ng-model="title">
<hr>
<!--父級往子級傳值-->
<sk666 my-title="{{title}}" name="{{name}}"></sk666>
</body>
<script src="angular1.6.js"></script>
<script>
//1.創建模塊
var app = angular.module('app', []);
//2.創建控制器
app.controller('skController', ['$scope',function ($scope) {
$scope.name = '父級name';
$scope.title = '父級title, 777'
}]);
//3.自定義指令
app.directive('sk666', function () {
return {
restrict:'EA',
//template:'<h1>{{name}}</h1>', //獨立作用域后子級沒有name,不會去父級找
template:'<h1><p>{{name}}</p><input type="text" ng-model="myTitle"></h1>',
replace:true,
controller:function ($scope) {
$scope.name = '子級name';
$scope.myTitle = '子級title';
},
scope:{
myTitle:'@',
name:'@'
}
}
});
</script>
