angular 指令学习
在指令中scope 定义的值的用法：例如
scope: {
local: "@nameprop",
secondLocal:"@secondNameprop",
secondLocalTest:"@threeNameprop"
}
local,secondLocal,secondLocalTest这三个值只能在指令内使用。而nameprop，secondNameprop，threeNameprop作为指令属性在指令上使用。
<!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('other-bbb')"></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>",
scope:{
selectData:"&myClick",
innerData:"=myData"//myData作为指令属性使用这里且是共享的,可以双向改变
},
link:function(scope,ele,attr){
scope.sonClick=function(aaa){
scope.innerData=aaa; // innerData只在指令内部使用
scope.selectData();
}
}
}
return directive;
};
app.controller("myController",["$scope",function($scope){
$scope.topClick = function(aa){
alert(aa);
}
$scope.otherClick = function(aa){
alert(aa);
}
$scope.myaddress="广州"; //初始化数据
}])
</script>
</html>
效果图
点击后
修改输入框数据
