javascript - HighCharts 未定义，因为 Javascript 文件中有多个 Html 页面

Question

我正在尝试获取一个名为“container”的 div id:

var chart = $(#container).highcharts();

当我通过在我的 html 页面中定义的 Controller 调用时，它工作得很好。但是，当我尝试通过我的 Html 页面未引用的另一个 Controller 调用此函数时，它无法正常工作。

那么，如何在其他 html 页面关联的其他 Controller 中调用我的 div？

例子:

它在我的 Controller “main”中工作并在我的 html 页面“main.html”中定义

    Item.Rest("datePerUser",null).then(function(totalDatePerUser){

        var objectDate = totalDatePerUser.data;

        var femDate = objectDate.Chart1Fem;
        var mascDate = objectDate.Chart1Masc;    

        loadDataChart1(mascDate, femDate);            

    });

它不起作用，在我的 Controller “菜单”中定义，它在我的 html 页面“menu.html”中定义

    PeriodItem.Rest("datePerUser_",Obj).then(function(datePerUserTeste){

                      var objectDate = datePerUserTeste.data;

                      newFemDate = objectDate.Chart1Fem;
                      newMaleDate = objectDate.Chart1Masc;    

                      loadDataChart1(newMaleDate, newFemDate);

                  }); 

A都调用follow函数

function loadDataChart1(dataMale, dataFem){

    var chartProfiles = $('#container').highcharts();

    obj_female =  JSON.parse('{ "data":' + dataFem + ' }');
    obj_male =  JSON.parse('{ "data":' + dataMale + ' }');

    chartProfiles.series[0].update(obj_female);    
    chartProfiles.series[1].update(obj_male);

} 

仅供引用，我将 angularJS 与 Rest Service 一起使用，以从数据库获取数据，并且我有多个 Html 页面。

Answer 1

对于您的案例来说，一个 super 简单的选项是具有“loadDataChart1”功能的“通用” Controller 。

//Step 1 
app.controller('CommonChartsController', function($scope) {
    $scope.createCharts = function (dataMale, dataFem) {    
      var chartProfiles = $('#container').highcharts();

      obj_female =  JSON.parse('{ "data":' + dataFem + ' }');
      obj_male =  JSON.parse('{ "data":' + dataMale + ' }');

      chartProfiles.series[0].update(obj_female);    
      chartProfiles.series[1].update(obj_male);
  };      
}
               
//Step 2
app.controller('MainController', function($scope, $controller) {

    $controller('CommonChartsController', {
        $scope: $scope               
    });

    Item.Rest("datePerUser",null).then(function(totalDatePerUser){
        var objectDate = totalDatePerUser.data;

        var femDate = objectDate.Chart1Fem;
        var mascDate = objectDate.Chart1Masc;    

        $scope.createCharts(mascDate, femDate);            
    });
}

//Step 3
app.controller('MenuController', function($scope, $controller) {

    $controller('CommonChartsController', {
        $scope: $scope               
    });

    PeriodItem.Rest("datePerUser_",Obj).then(function(datePerUserTeste){
      var objectDate = datePerUserTeste.data;

      newFemDate = objectDate.Chart1Fem;
      newMaleDate = objectDate.Chart1Masc;    

      $scope.createCharts(newMaleDate, newFemDate);
    }); 
}