现在想实现的是在angularjs中实现一个自定义指令,当选择的时候页面上要显示选的值
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div ng-controller="myCtrl">
<div test data="listData" ng-model="listData1111.value"></div>
<div >是{{listData1111.value}}</div>
<script src="js/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.listData = [
{id:1,title:'title1'},
{id:2,title:'title2'},
{id:3,title:'title3'}
];
console.log($scope);
});
app.directive('test',function(){
return{
restrict:'A',
scope:{
data:'='
},
require:'^ngModel',
template:'\
<span ng-click="showUl()" ng-model="value" style="width:200px;height:20px;background:red;display:inline-block">{{value}}</span>\
<ul ng-if="isShow">\
<li ng-repeat="list in data" ng-click="setValue($index)">{{list.title}}</li>\
</ul>\
',
link:function(scope,elem,attr,ctrl){
scope.isShow =false;
scope.showUl = function(){
scope.isShow = !scope.isShow;
}
scope.setValue = function(index){
scope.value = scope.data[index].id;
ctrl.$setViewValue(scope.data[index].id);
}
}
}
});
</script>
</body>
</html>
但是现在好像只会在自定义指令中显示当前值,父控制器不显示
自定义指令和你的控制器不在一个作用域里面,当然拿不到了。
建议可以使用 $broadcast 和 $on 去广播。
修改答案----------
定义一个参数用来指令和控制器之间使用,直接赋值。