angular指令操作修改外层数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>指令学习</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="myController">
<div ng-click="topClick('test')">我是父类</div>
<input type="text" ng-model="myaddress"/>
<hr>
{{myaddress}}aaa
<hr>
ccc
<hr>
<my-directive my-data="myaddress" my-click="otherClick(sonData)"></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}}</div>",
// template:"<div ng-click='selectData({ sonData :11111})'>点击我</div><div>{{innerData}}</div>",//这个也可以
scope:{
selectData:"&myClick",//selectData 这个可以在指令内部直接使用
innerData:"=myData"//myData作为指令属性使用这里且是共享的,可以双向改变
},
link:function(scope,ele,attr){ //参考文章https://www.cnblogs.com/fanzhengshao/p/6006220.html
scope.sonClick=function(zhilingcanshu){ //sonClick这个是封装一层并在里面调用
// scope.innerData="aaa"; // innerData只在指令内部使用
scope.selectData({ sonData :zhilingcanshu});
}
}
}
return directive;
};
app.controller("myController",["$scope",function($scope){
$scope.topClick = function(aa){
alert(aa);
}
$scope.otherClick = function(aa){
$scope.myaddress=aa;
}
$scope.myaddress="广州"; //初始化数据
}])
</script>
</html>
初始化效果
点击后
总结要么直接使用定义的方法
selectData({ sonData :11111})
template:"<div ng-click='selectData({ sonData :11111})'>点击我</div><div>{{innerData}}</div>",//这个也可以
要么封装一层，且在link 函数里面
link:function(scope,ele,attr){ //参考文章https://www.cnblogs.com/fanzhengshao/p/6006220.html scope.sonClick=function(zhilingcanshu){ //sonClick这个是封装一层并在里面调用 // scope.innerData="aaa"; // innerData只在指令内部使用 scope.selectData({ sonData :zhilingcanshu}); } }
参考：https://www.cnblogs.com/fanzhengshao/p/6006220.html
