Question

以下AngularJS控制器从html页面获取id参数，然后控制器应该加载file1.js或file2.js，具体取决于此id，加载的文件但有时可以工作，有时不起作用。

 myappApp.controller('ChartConfigController', function ($scope, ChartConfigService) {
 $scope.findOne= function() {
 ChartConfigService.findOne($scope.id).then(function(obj) {
        console.log(obj.type);
        var x = obj.type;
        if (x=="pie") {
            $.getScript("file1.js", function(){
                   console.log("File 1 loaded");
                });
        } else if (x=="line") {
            $.getScript("file2.js", function(){
                   console.log("File 2 loaded");
                });
        } else {
            console.log("not found");
        }

    });
 };      
});

html page

 <div id="form">
 <form action="" method="get">
 <input ng-model="id"  required>
 <input type="submit" ng-click="findOne()">
 </form>
 </div>

  <div id="container" style="min-width: 310px; height: 
   400px; max-width: 600px; margin: 0 auto">   </div>

file1.js和file2.js包含这样的高级代码，它已加载但没有执行，我不知道为什么。

$(function () {
$('#container').highcharts({
chart: {
    plotBackgroundColor: null,
    plotBorderWidth: 1,//null,
    plotShadow: false
},
title: {
    text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            style: {
                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            }
        }
    }
},
series: [{
    type: 'pie',
    name: 'Browser share',
    data: [
        ['Firefox',   45.0],
        ['IE',       26.8],
        {
            name: 'Chrome',
            y: 12.8,
            sliced: true,
            selected: true
        },
        ['Safari',    8.5],
        ['Opera',     6.2],
        ['Others',   0.7]
    ]
  }]
 });
});

Answer 1

$ scope.id可能无法在控制器中反映出来。如果元素的任何父元素创建了新范围，则范围变量＆＃34; id＆＃34;将在此范围内创建，因此不会在控制器范围内更新。

最佳做法是将所有输入ng-model包装在控制器启动的范围对象中，如此......

myappApp.controller('ChartConfigController', function ($scope, ChartConfigService) {
 $scope.chart_obj = {};
 $scope.findOne= function() {
   ChartConfigService.findOne($scope.chart_obj.id).then(function(obj) {
    console.log(obj.type);
    var x = obj.type;
    if (x=="pie") {
        $.getScript("file1.js", function(){
               console.log("File 1 loaded");
            });
    } else if (x=="line") {
        $.getScript("file2.js", function(){
               console.log("File 2 loaded");
            });
    } else {
        console.log("not found");
    }

   });
 };      
});

以html格式

<input ng-model="chart_obj.id"  required>

Answer 2

您是否尝试过创建2个指令并执行ng-if来选择要显示的指令？我认为代码不会被执行。你确认过了吗？

编辑：或者您可以创建一个指令并将该属性传递给该指令。

Angular使用特殊的$compile函数来修改DOM。这就是为什么您的更改可能没有被反映出来的原因。如果你在Angular之外进行DOM操作，我强烈建议将它包装在一个指令中。并且不要忘记在指令被销毁后删除对象。

请参阅this

Angularjs javascript加载有时无法正常工作

2 个答案: