Question

我试图了解角度指令的工作原理。我有以下代码，其中有一个新的指令“谷歌图表”。但是，当我做

时，我看到了

model = $scope.$eval($attr.ngModel);

它适用于作为对象的'visual1'，'visual2'等$ scope属性。但是，对于'visual'中的数组条目，这似乎不起作用（即在$ scope。$ eval语句之后未定义模型）。关于我在这里缺少什么的任何想法？

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"></link>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/restangular/1.3.1/restangular.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="//www.google.com/jsapi" type="text/javascript"></script>
    <style type="text/css">
        .bigGraph {
            width: 1440px;
            height: 500px;
            float: left;
        }
    </style>
    <script>
        var googleChart = googleChart || angular.module("google-chart", []);
        googleChart.directive("googleChart", function() {
            return {
                restrict: "A",
                link: function($scope, $elem, $attr) {
                    var model;

                    var initChart = function() {

                        model = $scope.$eval($attr.ngModel);

                        if (model) {
                            var dt = model.dataTable,
                                options = {},
                                chartType = $attr.googleChart;

                            if (model.title) {
                                options.title = model.title;
                            }

                            var options = {
                                title: 'Sample Charts',
                                hAxis: {
                                    title: 'Serv Time'
                                },
                                vAxis: {
                                    title: 'Total Steps',
                                    ticks: [250, 500, 750, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000]
                                },
                                colorAxis: {
                                    colors: ['green', 'red']
                                },
                                bubble: {
                                    textStyle: {
                                        fontSize: 11
                                    }
                                }
                            };

                            var googleChart = new google.visualization[chartType]($elem[0]);
                            googleChart.draw(dt, options)
                        }
                    };

                    $scope.$watch($attr.trigger, function(val) {
                        if (val === true) {
                            initChart();
                        }
                    });

                }
            }
        });

        var myApp = myApp || angular.module("myApp", ['restangular', 'google-chart']);

        myApp.factory('ChartService', function() {

            var exports = {};

            exports.loadGoogleVisualization = function() {

                try {

                    google.load('visualization', '1', {
                        'callback': 'console.log(\'success\');',
                        'packages': ['corechart']
                    });

                    return true;

                } catch (e) {
                    console.log('Could not load Google lib', e);
                    return false;
                }

            }

            return exports;
        });


        myApp.factory('ApiService', function($http, Restangular) {

            var exports = {};

            exports.getRestangular = function() {
                return Restangular.setBaseUrl("https://cdn.rawgit.com/venkyvb/164b6c12a4f8bc72a02b12234a32bc9c/raw/c81a3d4afcef04d364b7e899c827c7f990dd6434");
            }

            exports.getSummary = function() {
                return exports.getRestangular().one("summary.json").get();
            }

            return exports;
        });

        myApp.controller("IndexCtrl", function($scope, ApiService, ChartService) {

            $scope.activateChart = false;
            $scope.dataModel = {
                visual: [],
                visual1: {},
                visual2: {},
                visual3: {},
                metaData: {},
                data: {}
            };

            // First, we attempt to load the Visualization module 
            var loadGoogle = ChartService.loadGoogleVisualization();

            if (loadGoogle) {

                google.setOnLoadCallback(function() {

                    ApiService.getSummary().then(function(data) {

                            for (var j = 0, max = data.items.length; j < max; j++) {

                                var item_data = {};
                                item_data.url = data.items[j].url;
                                item_data.data = data.items[j].data;

                                // Set up the dataTable and columns
                                var dataTable = new google.visualization.DataTable();
                                dataTable.addColumn("string", "Step");
                                dataTable.addColumn("number", "Serv Time");
                                dataTable.addColumn("number", "Total steps");
                                dataTable.addColumn("number", "");
                                dataTable.addColumn("number", "E2E Time");

                                for (var i = 0; i < item_data.data.length; i++) {
                                    var aRow = [];
                                    aRow.push(item_data.data[i].stp);
                                    aRow.push(parseFloat(item_data.data[i].serv_time));
                                    aRow.push(parseFloat(item_data.data[i].total_steps));
                                    aRow.push(parseFloat(item_data.data[i].e2e_time));
                                    aRow.push(parseFloat(item_data.data[i].e2e_time));
                                    dataTable.addRow(aRow);
                                };

                                item_data.dataTable = dataTable;

                                $scope.dataModel.visual.push(item_data);

                                if (j === 0) {
                                    $scope.dataModel.visual1.dataTable = dataTable;
                                }

                                if (j === 1) {
                                    $scope.dataModel.visual2.dataTable = dataTable;
                                }

                                if (j === 2) {
                                    $scope.dataModel.visual3.dataTable = dataTable;
                                }
                                $scope.activateChart = true;
                            }
                        },
                        function(data) {
                            alert("Error");
                        });

                });
            }
        });
    </script>
</head>

<body ng-controller="IndexCtrl">
    <div tr-repeat="entry in dataModel.visual track by $index">
        <div google-chart="BubbleChart" ng-model="dataModel.visual[$index]" trigger="activateChart" class="bigGraph"></div>
    </div>

    <div google-chart="BubbleChart" ng-model="dataModel.visual1" trigger="activateChart" class="bigGraph"></div>
    <div google-chart="BubbleChart" ng-model="dataModel.visual2" trigger="activateChart" class="bigGraph"></div>
    <div google-chart="BubbleChart" ng-model="dataModel.visual3" trigger="activateChart" class="bigGraph"></div>
</body>

</html>

使用$ scope。$ eval从数组读取Angular指令

0 个答案: