Question

我在新的Angular应用中遇到了一个奇怪的问题：

我的所有组件似乎都在适当的位置（在plunker中），但结果窗口中绝对没有显示任何内容。徘徊我在这里失踪的东西。这是app.js代码：

'use strict';
var app = angular.module('myApp', [
  'ngRoute',
  'ui.bootstrap',
  'angularFileUpload'
]).
    config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/Quote', {templateUrl: "tabcontrol/tabcontrol.html", controller: 'TabController'})
          .otherwise({redirectTo: '/Quote'});
    }])
    .controller("TabController", ['$scope','$http', function ($scope, $http) {
      console.log("This is TabController");
      var setAllInactive = function() {
        angular.forEach($scope.workspaces, function(workspace) {
          workspace.active = false;
        });
      };

      var Site = {
        numberOfMainframes: undefined,
        numberOfStorageFrames:  undefined,
        numberOfUnixServers:  undefined,
        numberOfBladeCenters: undefined,
        numberOfX86Servers: undefined
      };

      var addNewWorkspace = function() {
        var id = $scope.workspaces.length + 1;
        $scope.workspaces.push({
          id: id,
          name: "Site " + id,
          active: true
        });
      };

      $scope.workspaces =
          [
            { id: 1, name: "Site 1" ,active:true  },
            { id: 2, name: "Site 2" ,active:false  }
          ];

      $scope.addWorkspace = function () {
        setAllInactive();
        addNewWorkspace();
      };

      $scope.removeWorkspace = function() {
        angular.forEach($scope.workspaces, function(workspace) {
          if(workspace.active){
            var index = $scope.workspaces.indexOf(workspace);
            console.log('Active Workspace id: ' + index);
            $scope.workspaces.splice(index,1);
          }
        })
      };

      $scope.collectValuesFromEachTab = function(){

        $scope.quote = new Object();
        $scope.quote.SalesForceId = $scope.salesForceId;
        $scope.quote.AccountName = $scope.accountName;
        $scope.quote.siteCollection = [];

        angular.forEach($scope.workspaces, function(workspace) {
          //console.log("Site: " + workspace.name);
          //console.log("Number of Mainframes: " + workspace.numberOfMainframes);
          //console.log("Number of Starage Frames" + workspace.numberOfStorageFrames);
          //console.log("Number of Unix/AIX Servers: " + workspace.numberOfUnixServers);
          //console.log("Number of Blade Centers: " + workspace.numberOfBladeCenters);
          //console.log("Number of x86 Servers: " + workspace.numberOfx86Servers);

          var site = new Object();
          site.SiteName = workspace.name;
          site.NumberOfMainframes = workspace.numberOfMainframes;
          site.NumberOfStorageFrames = workspace.numberOfStorageFrames;
          site.NumberOfUnixServers = workspace.numberOfUnixServers;
          site.NumberOfBladeCenters = workspace.numberOfBladeCenters;
          site.NumberOfX86Servers = workspace.numberOfx86Servers;

          $scope.quote.siteCollection.push(site);
        });
        var res = $http.post('http://10.211.55.26:8081/api/dcquote/testquote', $scope.quote);
        res.success(function(data, status, headers, config) {
          $scope.message = data;
        });
        res.error(function(data, status, headers, config) {
          alert( "failure message: " + JSON.stringify({data: data}));
        });
      }

    }])
    .controller("TabsChildController", ['$scope',function($scope){

    }])
    .controller('FileUploadController', ['$scope', 'FileUploader', function($scope, FileUploader) {
      var uploader = $scope.uploader = new FileUploader({
        url: 'http://10.211.55.26:8081/api/test/files'
      });

      // FILTERS

      uploader.filters.push({
        name: 'customFilter',
        fn: function(item /*{File|FileLikeObject}*/, options) {
          return this.queue.length < 10;
        }
      });

      // CALLBACKS

      uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
        console.info('onWhenAddingFileFailed', item, filter, options);
      };
      uploader.onAfterAddingFile = function(fileItem) {
        console.info('onAfterAddingFile', fileItem);
      };
      uploader.onAfterAddingAll = function(addedFileItems) {
        console.info('onAfterAddingAll', addedFileItems);
      };
      uploader.onBeforeUploadItem = function(item) {
        console.info('onBeforeUploadItem', item);
      };
      uploader.onProgressItem = function(fileItem, progress) {
        console.info('onProgressItem', fileItem, progress);
      };
      uploader.onProgressAll = function(progress) {
        console.info('onProgressAll', progress);
      };
      uploader.onSuccessItem = function(fileItem, response, status, headers) {
        console.info('onSuccessItem', fileItem, response, status, headers);
      };
      uploader.onErrorItem = function(fileItem, response, status, headers) {
        console.info('onErrorItem', fileItem, response, status, headers);
      };
      uploader.onCancelItem = function(fileItem, response, status, headers) {
        console.info('onCancelItem', fileItem, response, status, headers);
      };
      uploader.onCompleteItem = function(fileItem, response, status, headers) {
        console.info('onCompleteItem', fileItem, response, status, headers);
      };
      uploader.onCompleteAll = function() {
        console.info('onCompleteAll');
      };

      console.info('uploader', uploader);
    }])
    .run(function(){
      console.log("starting myApp");
    });

这是我的插件：

http://plnkr.co/edit/6nltAAmXLrguGqbxFz91?p=preview

Answer 1

<script type="javascript" src="script.js"></script>

无效，因此您的脚本未加载。将其更改为以下任一项：

<script type="text/javascript" src="script.js"></script>
<script src="script.js"></script>

type属性为no longer required，但如果您仍想使用它，则应使用text/javascript代替javascript。

如何正确配置AngularJS应用程序以使结果显示在plunker中

1 个答案: