指令=修饰符
=修饰符
<指令名 属性="变量名"></指令名>
<sk666 name="name" sub-title="title"></sk666>
- 2.注意:使用= 传递数据,传入是一个变量, 不需要使用{{}}
- 3.注意:只要scope中 使用=修饰符, 指令中必须传值,否则报错
scope:{
name:'=',
subTitle:'='
}
- 4.特点: 双向传递, 子级修改影响父级, 父级修改影响子级
- 5.从外界传入一属性的值, 传入的属性值不会覆盖子级自己属性.
<body ng-app="app" ng-controller="skController">
<h1>{{name}}</h1>
<input type="text" ng-model="title">
<hr>
<!--指令-->
<!--<sk666></sk666>-->
<sk666 name="name" sub-title="title"></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';
}]);
//3.自定义指令
app.directive('sk666', function () {
return {
restrict:'EA',
template:'<h1><p>{{name}}</p><input type="text" ng-model="subTitle"></h1>',
replace:true,
controller:function ($scope) {
$scope.name = '子级name';
$scope.subTitle = '子级title'
},
scope:{
name:'=',
subTitle:'='
}
}
});
</script>
