javascript - angularjs自定义指令上选择的内容怎么显示到父控制器中
本文介绍了javascript - angularjs自定义指令上选择的内容怎么显示到父控制器中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
现在想实现的是在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 去广播。
修改答案----------
定义一个参数用来指令和控制器之间使用，直接赋值。
<div test data="listData" value="listData1111.value"></div>
<div >是{{listData1111.value}}</div>
scope:{
data:'=',
value:'=' //value参数
},
scope.setValue = function(index){
scope.value = scope.data[index].id; //把选择的id给value
}这篇关于javascript - angularjs自定义指令上选择的内容怎么显示到父控制器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
