使用情况看代码里面注释说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJs指令属性transclude</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="mydemo">
<input type="text" value="" ng-model="user.name"/>
{{sonData}}
<br>
{{showTopName}}
<hr>
<div> <textarea cols="30" rows="4" ng-model="text"></textarea></div>
<hr>
<my-directive ng-transclude>
9999 {{showTopName}}9999 showTopName之所以可以在这里显示，因为指令没有设置scope，所有数据共享
</my-directive>
<hr>
<div my-directive>
hello这是没有设置ng-transclude所以不展示出来
</div>
<select-data on-to-parent="acceptClick()" my-user="user" to-parent="sonData" show-top-name="showTopName" ></select-data>
<hr>
<!-- <select-data ></select-data> -->
</div>
</body>
<script type="text/javascript">
var app = angular.module('app', []);
app.directive("myDirective",myDirective);
function myDirective(){
var directive={
restrict:"AE",
template:"<div><h3>这是测试数据</h3></div>",
replace:true,
transclude:'element' //设置这个值，然后在指令上设置ng-transclude 就可以把指令中的内容展示，替换原来template的数据
};
return directive;
};
app.directive("selectData",selectData);
function selectData(myService){ //传一个服务进去
var directive={
restrict:"AE",
template:" Say：{{user.name}} <div ng-click='newSonClick(88888)' >我来点击</div><div> to----【{{ newShowTopName}}】--->自己的数据{{newData}}---【】</div><div>指令：{{sonData}}</div> <input type='text' value='' ng-model='user.name'/>",
// template:'<div>点击我，有惊喜哦</div>',
scope:{
user: "=myUser",
sonData:'=toParent',//son+xx表示在内部使用，toParent 表示对外且是属性
mySelf:"=" ,
sonClick: '&onToParent',//son+xxx表示在指令内部使用 onToParent 表示对外且是属性
showTopName:'='
},
controller:function($scope){ //必须使用$符号
$scope.newData="bigHello";
},
// replace:true,
// controller:function(scope){
// scope.newData="bigHello";
// },
link:function(scope,el, attr){
//scope.sonData="我是son指令数据";
scope.newSonClick=function(toData){
// console.log(myService,"myService")
myService.setServiceName(toData); //服务接收传参数
scope.sonClick();
//scope.mySelf="myself10000";
}
// el.on("click",function(){ // 只有设置 scope:true才有效果，其他形式没有效果，会报topClick没有定义错误
// scope.topClick();
// })
scope.newShowTopName=scope.showTopName; //指令接受的值必须通过定义来，或者通过服务获取得到，否则无效，甚至报错
}
}
return directive;
};
//创建服务
app.service("myService",myService);
function myService(){
var serviceName;
this.setServiceName=function(newName){ //赋值
serviceName=newName;
}
this.getServiceName=function(){ //取值
return serviceName;
}
console.log(serviceName,"aaaa");
};
app.controller("mydemo", ["$scope","myService",function ($scope,myService) {
$scope.parentName="父层数据";//定义值
$scope.showTopName="父级数据";
$scope.acceptClick=function(){
//console.log(myService.getServiceName(),"接收");
$scope.showTopName=myService.getServiceName(); //父级接收服务传来的参数
}
$scope.sonData="我来自父级";
//父级方法
$scope.topClick=function(){
alert("我是父级方法")
}
$scope.user = {
name: 'hello',
id: 1
};
}])
</script>
</html>
父控制器的内容可以在自己控制范围内使用，包括子控制器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJs指令属性transclude</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="mydemo">
<input type="text" value="" ng-model="user.name"/>
{{sonData}}
<br>
{{showTopName}}
<hr>
<div> <textarea cols="30" rows="4" ng-model="text"></textarea></div>
<hr>
<my-directive ng-transclude>
9999 {{showTopName}}9999 showTopName之所以可以在这里显示，因为没有设置scope，所有数据共享
</my-directive>
<hr>
<div my-directive>
hello这是没有设置ng-transclude所以不展示出来
</div>
<select-data my-user="user"></select-data>
<hr>
【{{childTest}}】
<!-- <select-data ></select-data> -->
<div ng-controller="myChild">
{{childTest}}
<hr>
{{showTopName}}
</div>
</div>
</body>
<script type="text/javascript">
var app = angular.module('app', []);
app.directive("myDirective",myDirective);
function myDirective(){
var directive={
restrict:"AE",
template:"<div><h3>这是测试数据</h3></div>",
replace:true,
transclude:'element' //设置这个值，然后在指令上设置ng-transclude 就可以把指令中的内容展示，替换原来template的数据
};
return directive;
};
app.directive("selectData",selectData);
function selectData(myService){ //传一个服务进去
var directive={
restrict:"AE",
template:" Say：{{user.name}} <div >我来点击</div><div> to------->自己的数据</div><div>指令：</div> <input type='text' value='' ng-model='user.name'/>",
// template:'<div>点击我，有惊喜哦</div>',
scope:{
user: "=myUser"
},
// replace:true,
link:function(scope,el, attr){
//scope.sonData="我是son指令数据";
scope.newSonClick=function(toData){
// console.log(myService,"myService")
myService.setServiceName(toData); //服务接收传参数
scope.sonClick();
}
// el.on("click",function(){ // 只有设置 scope:true才有效果，其他形式没有效果，会报topClick没有定义错误
// scope.topClick();
// })
}
}
return directive;
};
//创建服务
app.service("myService",myService);
function myService(){
var serviceName;
this.setServiceName=function(newName){ //赋值
serviceName=newName;
}
this.getServiceName=function(){ //取值
return serviceName;
}
console.log(serviceName,"aaaa");
};
app.controller("mydemo", ["$scope","myService",function ($scope,myService) {
$scope.parentName="父层数据";//定义值
$scope.showTopName="父级数据";
$scope.acceptClick=function(){
//console.log(myService.getServiceName(),"接收");
$scope.showTopName=myService.getServiceName(); //父级接收服务传来的参数
}
$scope.sonData="我来自父级";
//父级方法
$scope.topClick=function(){
alert("我是父级方法")
}
$scope.user = {
name: 'hello',
id: 1
};
}])
app.controller("myChild",function($scope){
$scope.childTest="我是子控制器";
});
</script>
</html>
效果
标签：function,控制器,directive,app,showTopName,myService,scope,交互,angular From： https://www.cnblogs.com/xiaohuasan/p/16847515.html