AngularJS,如何在HTML中使用外部JS <script>中的变量?</script>

时间:2014-02-25 10:53:55

标签: javascript html angularjs

我不是AngularJS专家,我在主题中有一个简单的问题。

我的代码在页面的开头定义了一个app和controller:

 <script>
    var isisApp = angular.module('isisApp', []);
    isisApp.controller('AccountListCtrl', function($scope) {
        $scope.sample = {'firstName': 'John', 'lastName': 'Smith', 'age': 25, 'AccountType': 'Safekeeping',
            'address': {'street': 'Dorsstok', 'city': 'Erica'},
            'phone': [{'type': 'home', 'number': '+31591302900'}, {'type': 'mobile', 'number': '+31625299740'}, {'type': 'Business', 'number': '+43223627551'}],
            'account': [{'type': 'Bonds', 'value': '111111'}, {'type': 'Stocks', 'value': '$ 0625299740'}, {'type': 'Funds', 'value': '999990'}],
            'json_read_date': '4/12'
    };
 });
 </script>

例如,我将json_read_date放在我构建图表的外部(ChartJS)中,如何在那里读取变量?我有一个像这样的样本,但它不起作用:

var read_date= $('[ng-controller="AccountListCtrl"]').scope().json_read_date;

我收到此错误:'undefined'不是函数等。

你知道吗?我在body标签内部使用ng-controller =“AccountListCtrl”,我的第二个脚本也是..

提前致谢! 法比奥

在Isha回答之后我调整了我的代码,但是我看不到任何图表:

<!-- Graph !-->
<canvas id="canvas" height="450" width="450"></canvas>
<script>
         isisApp.controller('ChartJS', function($scope, Init) {
                 $scope.init = Init;

                 var delivery = $scope.init.json_doughnut_delivery;
                 var taxother = $scope.init.json_doughnut_taxother;
                 var supply = $scope.init.json_doughnut_supply;

                            var doughnutData = [
                                {
                                    value: delivery,
                                    color: "#000000"
                                },
                                {
                                    value: taxother,
                                    color: "#838383"
                                },
                                {
                                    value: supply,
                                    color: "#FFFF00"
                                }
                            ];

                            var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData);
                        });
</script>

之前只需使用:

 <!-- Graph !-->
 <canvas id="canvas" height="450" width="450"></canvas>
 <script>
 var doughnutData = [
    {
        value: 32,
        color: "#000000"
    },
    {
        value: 23,
        color: "#838383"
    },
    {
        value: 11,
        color: "#FFFF00"
    }
 ];

 var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData);
 </script>

1 个答案:

答案 0 :(得分:0)

您可以使用factory提供sample数据并将其注入其他控制器,指令......

isisApp.factory('Sample', function(){

 return {'firstName': 'John', 'lastName': 'Smith', 'age': 25, 'AccountType': 'Safekeeping',
            'address': {'street': 'Dorsstok', 'city': 'Erica'},
            'phone': [{'type': 'home', 'number': '+31591302900'}, {'type': 'mobile', 'number': '+31625299740'}, {'type': 'Business', 'number': '+43223627551'}],
            'account': [{'type': 'Bonds', 'value': '111111'}, {'type': 'Stocks', 'value': '$ 0625299740'}, {'type': 'Funds', 'value': '999990'}],
            'json_read_date': '4/12'
    };

});

isisApp.controller('AccountListCtrl', function($scope, Sample){
$scope.sample = Sample;
//now you have an access 'json_read_date' inside this controller, via  - Sample.json_read_date OR $scope.sample.json_read_date
});

isisApp.controller('ChartJS', function($scope, Sample){
$scope.sample = Sample;
//now you have an access 'json_read_date' inside this controller, via  - Sample.json_read_date OR $scope.sample.json_read_date

});

希望它有所帮助。