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>

但是现在好像只会在自定义指令中显示当前值,父控制器不显示

阅读 2.4k
1 个回答

自定义指令和你的控制器不在一个作用域里面,当然拿不到了。
建议可以使用 $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
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题