Angular Google折线图指令

Question

我想为Google折线图制作一个角度属性指令，而不是在控制器中手动加载图表，因为第一次页面加载图表时很容易绘制并导航到另一个页面和控制器并返回上一页所以它不是画图。在这里，我正在绘制如下图表，但我想制作一个角度指令，因为它不使用页面导航

<ion-view title="Select Medicines" catch-view="false">
<ion-content>
        <div class="list med-select inven-l">
            <div class="list" style="background-color:52487B;">
                <div class="row item item-icon-left item-icon-right   item-stable">

            <div curve_chart  style="width:100%; height: 250px" > </div>

                </div>
                <div class="row item item-icon-left item-icon-right item-stable" style="margin-bottom: 5px;" ng-click="gotoDetail(weekSales.OrderNo)" ng-repeat="weekSales in WeeklyData.orders | orderBy:'CreatedOn'">
                    <div class="col col-70">
                        <h2>{{weekSales.Customer.FName}} {{weekSales.Customer.LName}} </h2>
                         <p>Order No: MY-{{weekSales.OrderNo}} - {{weekSales.CreatedOn| date : 'dd'}}/{{weekSales.CreatedOn| date : 'MM'}}/{{weekSales.CreatedOn| date : 'yyyy'}}</p>
                    </div>
                    <div class="col col-20">
                        <span style="color:#d5d1e7">&#8377; {{weekSales.Amount}}</span>
                    </div>
                    <div class="col col-10">
                    <i class="icon ion-chevron-right"></i>
                    </div>
                </div>

            </div>
        </div>
     </ion-content>

angular.module('controllers.Chemist_sales_monthlyCtrl', [])

 .controller('Chemist_sales_monthlyCtrl', function($scope, $state,           $ionicHistory,serverRepo,$ionicLoading,profileInfo) {

$scope.data = {};

$scope.gotoDetail = function(orderNo){
        //alert(orderNo)
         profileInfo.orderId=orderNo
    $state.go('pannel.chem_order_history_Detail');
}

$scope.myGoBack= function(){
    $ionicHistory.goBack()
}
$scope.$on('$ionicView.enter', function() {


    $ionicLoading.show({
        template: '<ion-spinner icon="spiral"></ion-spinner>',
        noBackdrop:false
    });

    serverRepo.salesMonthly().then(function(objS){

            console.log(objS)
         $scope.monthlyData=objS.data;
          angular.forEach(objS.data.orders, function(value, key) {
          objS.data.orders[key].CreatedOn=new Date(objS.data.orders[key].CreatedOn)
         })
         var options = {
                legend: { position: 'bottom' },
                curveType: 'function',

                titlePosition: 'in', 
                axisTitlesPosition: 'in',
                hAxis: {
                  textPosition: 'in',
                  minValue: 0,

                  textStyle:{color: "#fff"}

                }, 
                vAxis: {
                  minValue: 0,
                  maxValue: 13,
                  textPosition: 'in',
                  textStyle:{color: "#fff"},
                  minorGridlines:{color: "#ccc"}
                },

                lineWidth: 6,
                fontSize:11,
                chartArea:{left:0,top:0,width: '100%', height: '100%',backgroundColor: '#43396D'},
                                   colors: ['#32BD76'],
                                   animation:{
                                   duration: 1500,
                                   easing: 'out',
                                   startup: true
                                   }

         };
            google.charts.setOnLoadCallback( function () {
          // Create and populate the data table.
                console.log(objS.data.labels)
                console.log(objS.data.datasets.data)
              var data = new google.visualization.DataTable();
              data.addColumn('string', 'labels');
              data.addColumn('number', 'data');

              for(i = 0; i < objS.data.labels.length; i++)
                data.addRow([objS.data.labels[i], objS.data.datasets.data[i]]);

              // Create and draw the visualization.
              var chart = new google.visualization.LineChart(document.getElementById('curve_chartmonthly')).
                chart.draw(data, options);
         });


        $ionicLoading.hide();
         },function(objE){
         // alert(JSON.stringify(objE));
         console.log("Error:-\n"+JSON.stringify(objE));
         $ionicLoading.hide();
         });
    });
})