111
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 指令属性link</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
</head>
<body ng-app='app'>
<div>
指令中的控制器里面的scope参数可以穿越多层，是因为没有设置scope值，而独立的控制器里的scope，只能在自己的控制器范围内有效，即在子控制器里面也可以。
<br>
{{vm.aaaa}}
<hr>
{{test}}
<hr>
<custom-directive></custom-directive>
<hr>
9999
{{bigTest}}
<hr>
<div ng-controller="myTest">
{{vm.aaaa}}
<br>
{{bigTest}}
<br>
{{test}}
<br>
========
{{sonTest}} 777
<hr>
<div ng-controller="childTest">
{{sonTest}}
<br>
{{bigTest}}
</div>
</div>
</div>
<script type="text/javascript">
angular
.module('app',[])
.directive('customDirective', customDirective).controller("myTest",function($scope){
$scope.bigTest="我可以穿越么?";
}).controller("childTest",function($scope){
$scope.sonTest="我是son控制器";
});
function customDirective() {
var directive = {
restrict: 'EA',
template: '<div>{{test}} {{vm.aaaa}}</div>',
//scope:true,是你在起作用
link: function(){},
controller: directiveController,
controllerAs: 'vm' //注释之后顶层 vm.aaaa 失效
};
return directive;
}
function directiveController($scope) {
var vm = this;
vm.aaaa="这是数据";
console.log(vm,"ddddd")
$scope.test = "I'm from Controller";
// return vm;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJs控制器</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
</head>
<body ng-app='app'>
{{vm.aaaa}}
{{fromData}}
<div >
<div >我是父类</div>
{{myaddress}}
{{myData}}
<hr>
{{vm.aaaa}}
<my-directive my-data="myaddress" my-click="topClick(outData)"></my-directive>
</div>
</body>
<script type="text/javascript">
var app = angular.module('app', []);
app.directive('myDirective',myDirective);
function myDirective(){
var directive={
restrict:'AE',
template:"<div ng-click='sonClick(1111)'>点击我</div><div>内部：{{innerData}}//{{fromData}}</div>",
scope:{
selectData:"&myClick",
innerData:"=myData"
},
controller:directiveController,
link:function(scope,ele,attr){
scope.sonClick=function(aaa){
scope.selectData({outData:aaa});
}
},
controllerAs: 'vm'
}
return directive;
};
function directiveController($scope) {
var vm = this;
vm.aaaa="这是数据";
console.log(vm,"ddddd")
$scope.fromData = "我来自指令数据";
// return vm;
}
// app.controller("mydemo",["$scope",function($scope){
// $scope.topClick = function(aa){
// alert(aa);
// }
// $scope.myaddress="广州"; //初始化数据
// }])
</script>
</html>
标签：function,directive,app,vm,aaaa,指令,scope,angular From： https://www.cnblogs.com/xiaohuasan/p/16846400.html