指令@修饰符
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>
