时间戳

首页 > 解决方案 > 从控制器访问值到具有本地范围的指令

angularjs - 从控制器访问值到具有本地范围的指令

问题描述

我有一个指令（具有本地范围）和一个控制器。如果我想从控制器访问学生数据到指令，我需要怎么做？下面是代码。我的目的是建立一个图表，显示缺席和出席的学生的详细信息，当用户点击缺席/出席时，我应该能够显示一个包含详细信息的表格。

JS

 app.directive('hcPieChart', function () {
                    return {
                        restrict: 'E',
                        template: '<div></div>',
                        scope: {
                            title: '@',
                            data: '='
                        },
                        link: function (scope, element,attrs) {
                            Highcharts.chart(element[0], {
                                chart: {
                                    type: 'pie',
                                    spacingTop: 30,
                                     width: 300,
                                    height: 250,

                                },
                                title: {
                                            text: ''
                                        },

                                plotOptions: {
                                    pie: {

                                        allowPointSelect: true,
                                        cursor: 'pointer',
                                        showInLegend: true,
                                        dataLabels: {
                                            enabled: false,
                                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                                        },
    events: {
                                            click: function(event) 
                                            {

    how can i access the student details from the controller to this function ? i want to use the click to call a rest service (inside the controller ).

                                },

                                series: [{
                                    data: scope.data
                                }]
                            });
                        }
                    };
                })

    app.controller('myCtrl', ['$scope','$http','DTOptionsBuilder', 'DTColumnBuilder',function($scope,$http,DTOptionsBuilder, DTColumnBuilder)

    {
    $scope.showTableDetails=function(x,typeOfData){
            $scope.showTableDetailsData="";
            $scope.showTableName="";
            $scope.checkAnomaly=    false;
            if(typeOfData==1){
                dataCatagory="total";
                $scope.checkAnomaly==false;
            }else if(typeOfData==2){
                dataCatagory="present";
                $scope.checkAnomaly==false;
            }else if(typeOfData==3){
                dataCatagory="absent";
                $scope.checkAnomaly==false;
            }
                $http.get('http://localhost/rest/tripsStatus/studentdetails/'+x.tripDetails.tripId+'/'+dataCatagory+'/am').
            then(function(result) {
                    $scope.showTableDetailsData = result.data.messages[0].data.studentDetails;
                    $scope.showTableName=x.tripDetails.tripName;

                });

HTML

    <div ng-app="myApp" ng-controller="myCtrl">
           <div ng-repeat="x in data track by $index"  style="float:left";>
            <div class="wrapper">
            <trip-details></trip-details>
            <div class="chartdiv">
            <hc-pie-chart data="showPieChart(x)"></hc-pie-chart>
          </div>
</div>
</div>
</div>

标签： angularjshighcharts

解决方案

如果您在“第一级”使用指令，即不是指令中的指令，您可以使用$parent：

link: function (scope, element, attrs) {
  ...
  scope.$parent.showTableDetails(...)
}

如果您在另一个指令中使用指令，它将是$scope.$parent.$parent等等。

推荐阅读