問題angularjs

Question

我建設有highcharts集成（highcharts-NG）的角度web應用程序

我所做的就是設立了工廠，供應商，宣佈我的圖表配置選項對象如下：

angular.module('socialDashboard') 

    .factory('SentimentChartFactory', function() { 
    var sentimentGraph = { 
     options: { 
     chart: { 
     type: 'area', 
     backgroundColor: false, 
     height: 450, 
     zoomType: 'x' 
    } 
    }, 
    colors: ['#d1d5d8', '#954145', '#41a85f'], 
    xAxis: { 
    type: 'datetime', 
    dateTimeLabelFormats: { // don't display the dummy year 
     month: '%e. %b', 
     year: '%b' 
    }, 
    gridLineWidth: 1 
    }, 
    yAxis: { 
    title: { 
     text: 'Sentiment %' 
    }, 
    gridLineWidth: 0, 
    labels: 
    { 
     enabled: false 
    } 
    }, 
    series: [ 
    { 
     name: 'Basic Neutral', 
     data: [ 
     [Date.UTC(2014, 10, 10), 60], 
     [Date.UTC(2014, 10, 11), 55], 
     [Date.UTC(2014, 10, 12), 50], 
     [Date.UTC(2014, 10, 13), 60], 
     [Date.UTC(2014, 10, 14), 55], 
     [Date.UTC(2014, 10, 15), 60], 
     [Date.UTC(2014, 10, 16), 55], 
     [Date.UTC(2014, 10, 17), 50], 
     [Date.UTC(2014, 10, 18), 60], 
     [Date.UTC(2014, 10, 19), 55], 
     ] 
    } 
    ], 
    loading: false 
    }; 
    return sentimentGraph; 
}); 

然後我建立了我的圖表，我拉選項控制器由我廠提供程序對象

angular.module('socialDashboard') 

    .controller('SentimentChartController', function ($scope, $http, SentimentChartFactory) { 

     // Set up chart on summary page  
     $scope.SentimentChartSummaryConfig = SentimentChartFactory; 
     $scope.SentimentChartSummaryConfig.options.chart.height = 250; 

     // Set up chart on Sentiment Page 
     $scope.SentimentChartConfigMain = SentimentChartFactory; 
     $scope.SentimentChartConfigMain.options.chart.height = 450; 
}); 

這是在這裏我聲明我的圖表：

簡介頁：

<div ng-controller="SentimentChartController"> 
    <highchart id="{{link + '_chart'}}" config="SentimentChartSummaryConfig"></highchart> 
</div> 

情緒頁：（不同視圖）

<div ng-controller="SentimentChartController"> 
    <highchart id="{{link + '_chart'}}" config="SentimentChartConfigMain"></highchart> 
</div> 

，我遇到的問題是，即使我宣佈了一個不同的值配置屬性兩個圖都顯示爲相同的高度（450）。爲什麼是這個以及如何解決這個問題？

Answer 1

的問題是因爲在這兩種情況下，你處理相同對象，因爲無論SummaryConfig和MainConfig是相同的SentimentChartFactory對象引用。

在這種情況下，最簡單的解決方案是讓服務回報新對象每次：

angular.module('socialDashboard') 
.factory('SentimentChartFactory', function() { 
    return { 
     getConfig: function() { 
      return { 
       options: { 
        chart: { 
         type: 'area', 
         backgroundColor: false, 
         height: 450, 
         zoomType: 'x' 
        } 
       }, 
       colors: ['#d1d5d8', '#954145', '#41a85f'], 
       xAxis: { 
        type: 'datetime', 
        dateTimeLabelFormats: { // don't display the dummy year 
         month: '%e. %b', 
         year: '%b' 
        }, 
        gridLineWidth: 1 
       }, 
       yAxis: { 
        title: { 
         text: 'Sentiment %' 
        }, 
        gridLineWidth: 0, 
        labels: { 
         enabled: false 
        } 
       }, 
       series: [{ 
        name: 'Basic Neutral', 
        data: [ 
         [Date.UTC(2014, 10, 10), 60], 
         [Date.UTC(2014, 10, 11), 55], 
         [Date.UTC(2014, 10, 12), 50], 
         [Date.UTC(2014, 10, 13), 60], 
         [Date.UTC(2014, 10, 14), 55], 
         [Date.UTC(2014, 10, 15), 60], 
         [Date.UTC(2014, 10, 16), 55], 
         [Date.UTC(2014, 10, 17), 50], 
         [Date.UTC(2014, 10, 18), 60], 
         [Date.UTC(2014, 10, 19), 55], 
        ] 
       }], 
       loading: false 
      } 
     } 
    }; 
}); 

，然後用它喜歡：

$scope.SentimentChartSummaryConfig = SentimentChartFactory.getConfig(); 
$scope.SentimentChartSummaryConfig.options.chart.height = 250; 

$scope.SentimentChartConfigMain = SentimentChartFactory.getConfig(); 
$scope.SentimentChartConfigMain.options.chart.height = 450;