angularJS页面不呈现任何内容

时间:2017-03-23 16:11:42

标签: javascript angularjs routing angular-routing

我知道这个问题是重复的,但我搜索了很多,我无法解决它,我想在angulrJS App中创建页面,它不会在控制台上呈现任何数据而没有任何错误

这是页面

notebook.html:

<div id="content" class="notebookContent" ng-controller="NotebookCtrl as showCase">

  <!-- Include the paragraphs according to the note, pass the note to init function -->
  <div id="{{currentParagraph.id}}_paragraphColumn_main"
       ng-repeat="currentParagraph in note.paragraphs"
       ng-controller="ParagraphCtrl"
       ng-init="init(currentParagraph, note)"
       ng-class="columnWidthClass(currentParagraph.config.colWidth)"
       class="paragraph-col">
    <div class="new-paragraph" ng-click="insertNew('above')" ng-hide="viewOnly || asIframe || revisionView">
      <h4 class="plus-sign">&#43;</h4>
    </div>
    <div id="{{currentParagraph.id}}_paragraphColumn"

         ng-class="{'paragraph-space box paragraph-margin': !asIframe, 'focused': paragraphFocused,
                    'lastEmptyParagraph': !paragraph.text && !paragraph.result}"
         ng-hide="currentParagraph.config.tableHide && viewOnly"
         ng-dblclick="paragraphOnDoubleClick(currentParagraph.id);">


         <div id="{{paragraph.id}}_container"
     ng-class="{'paragraph': !asIframe, 'paragraphAsIframe': asIframe}">



  <div>
  <!--   <div ng-if="!paragraph.config.editorHide && !viewOnly" style="margin-bottom:3px;">
      <code-editor
        paragraph-id="paragraph.id"
        paragraph-context="paragraph"
        dirty-text="dirtyText"
        original-text="originalText"
        on-load="aceLoaded"
        revision-view="revisionView"
      ></code-editor>
    </div>
 -->
    <div>
    <div id="{{paragraph.id}}_runControl" class="runControl">
  <div id="{{paragraph.id}}_progress" class="progress" ng-if="paragraph.status=='RUNNING'">
      <div ng-if="getProgress()>0 && getProgress()<100 && paragraph.status=='RUNNING'"
        class="progress-bar" role="progressbar" style="width:{{getProgress()}}%;"></div>
      <div ng-if="(getProgress()<=0 || getProgress()>=100) && (paragraph.status=='RUNNING' )"
          class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%;"></div>
  </div>
</div>



    </div>

    <!-- Rendering -->
    <div class="tableDisplay"
         ng-show="!paragraph.config.tableHide"
         ng-controller="ResultCtrl"
         ng-repeat="result in paragraph.results.msg track by $index"
         ng-init="init(result, paragraph.config.results[$index], paragraph, $index)"
         >




         <div>
  <div >


  <div id="{{id}}_switch"
     ng-if="(type == 'TABLE' || apps.length > 0 || suggestion.available && suggestion.available.length > 0) && !asIframe && !viewOnly"
     class="result-chart-selector">

 <div ng-if="type == 'TABLE'" class="btn-group">
    <button type="button" class="btn btn-default btn-sm"
            ng-repeat="viz in builtInTableDataVisualizationList track by $index"
            ng-class="{'active' : viz.id == graphMode && !config.helium.activeApp}"
            ng-click="switchViz(viz.id)"
            ng-bind-html="viz.icon">
    </button>
  </div> 

 <!-- by walid no effection <div class="btn-group">
    <button type="button"
            ng-if="type != 'TABLE'"
            ng-click="switchApp()"
            ng-class="{'active' : !config.helium.activeApp}"
            class="btn btn-default btn-sm"><i class="fa fa-terminal"></i>
    </button>

    <button type="button"
            class="btn btn-default btn-sm"
            ng-repeat="app in apps"
            ng-click="switchApp(app.id)"
            ng-class="{'active' : app.id == config.helium.activeApp}"
            ng-bind-html="app.pkg.icon">
    </button>
  </div> -->
</div>
<!-- by walid no effection 
<div id="{{paragraph.id}}_helium"
     ng-if="(suggestion.available && suggestion.available.length > 0) && !asIframe && !viewOnly"
     class="btn-group"
     style="margin-bottom: 10px;">
  <button type="button"
          class="btn btn-default btn-sm dropdown-toggle"
          data-toggle="dropdown"
          style="font-weight:bold; background-color:#ffdf96; border: 1px solid #FED233">
    He
  </button>
  <ul class="dropdown-menu"
      style="z-index:1002"
      ng-if="suggestion.available && suggestion.available.length > 0"
      role="menu">
    <li class="appSuggestion">
      <div ng-repeat="pkgInfo in suggestion.available"
           style="margin-bottom:5px">
        <button type="button"
                class="btn btn-default btn-sm"
                ng-click="loadApp(pkgInfo.pkg)"
                ng-bind-html="pkgInfo.pkg.icon">
        </button>
        <span class="inline">{{pkgInfo.pkg.name}}</span>
      </div>
    </li>
  </ul>
</div>    -->

<div class="btn-group"
     ng-if="type == 'TABLE' && !asIframe && !viewOnly"
     style="margin-bottom: 10px;">
  <button type="button" class="btn btn-default btn-sm"
          style="margin-left:10px"
          ng-click="exportToDSV(',')"
          tooltip="Download Data as CSV" tooltip-placement="bottom">
    <i class="fa fa-download"></i>
  </button>
  <button type="button" class="btn btn-default btn-sm dropdown-toggle caretBtn"
          data-toggle="dropdown">
    <span class="caret" style="margin: 0px;"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu" style="min-width: 70px;">
    <li ng-click="exportToDSV(',')"><a>CSV</a></li>
    <li ng-click="exportToDSV('\t')"><a>TSV</a></li>
  </ul>
</div>

<span
   ng-if="type=='TABLE' && !config.helium.activeApp && graphMode!='table' && !asIframe && !viewOnly"
   style="margin-left:10px; cursor:pointer; display: inline-block; vertical-align:top; position: relative; line-height:30px;">
  <a class="btnText" ng-click="toggleGraphSetting()">
    settings <span ng-class="config.graph.optionOpen ? 'fa fa-caret-up' : 'fa fa-caret-down'"></span>
  </a>
</span>




  </div>
   <div
    id="p{{id}}_resize"
    ng-if="!config.helium.activeApp"
    style="padding-bottom: 5px;"
    resize='{"allowresize": "{{!asIframe && !viewOnly}}", "graphType": "{{type}}"}'
       resizable on-resize="resize(width, height);">

    <div ng-if="type=='TABLE'">
      graph setting
      <div class="option lightBold" style="overflow: visible;"
           ng-show="graphMode!='table'
                    && config.graph.optionOpen && !asIframe && !viewOnly">
        <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
             id="trsetting{{id}}_{{viz.id}}"
             ng-show="graphMode == viz.id"></div>
        <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
             id="vizsetting{{id}}_{{viz.id}}"
             ng-show="graphMode == viz.id"></div>
      </div>

      graph
      <div id="p{{id}}_graph"
           class="graphContainer"
           ng-class="{'noOverflow': graphMode=='table'}"
           >
        <div ng-repeat="viz in builtInTableDataVisualizationList track by $index"
             id="p{{id}}_{{viz.id}}"
             ng-show="graphMode == viz.id">
        </div>
      </div>

      <div id="{{id}}_comment"
           class="text"
           ng-if="tableDataComment"
           ng-bind-html="tableDataComment">
      </div>
    </div>

    <div ng-if="type == 'TEXT'"
         class="plainTextContainer">
      <div class="fa fa-level-down scroll-paragraph-down"
           ng-show="showScrollDownIcon()"
           ng-click="scrollParagraphDown()"
           tooltip="Follow Output"></div>
      <div id="p{{id}}_text"
           style="max-height: {{config.graph.height}}px; overflow: auto"
           class="text plainTextContent"></div>
      <div class="fa fa-chevron-up scroll-paragraph-up"
           ng-show="showScrollUpIcon()"
           ng-click="scrollParagraphUp()"
           tooltip="Scroll Top"></div>
    </div>

    <div id="p{{id}}_html"
         class="resultContained"
         ng-if="type == 'HTML'">
    </div>

    <div id="p{{id}}_angular"
         class="resultContained"
         ng-if="type == 'ANGULAR'">
    </div>

    <img id="{{id}}_img"
         ng-if="type == 'IMG'"
         ng-src="{{getBase64ImageSrc(result.data)}}" />
  </div> 

  <div ng-repeat="app in apps">
    <div id="p{{app.id}}"
         ng-show="config.helium.activeApp == app.id">
    </div>
  </div>
</div>



    </div>
    <div id="{{paragraph.id}}_error"
         class="error text"
         ng-if="paragraph.status == 'ERROR'"
         ng-bind="paragraph.errorMessage">
    </div>
  </div>

  <div>

  <div id="{{paragraph.id}}_control" class="control" ng-show="!asIframe">

  <span>
    {{paragraph.status}}
  </span>

  <span ng-if="paragraph.status=='RUNNING'">
    {{getProgress()}}%
  </span>

  <!-- Run / Cancel button -->
  <span ng-if="!revisionView">
    <span class="icon-control-play" style="cursor:pointer;color:#3071A9" tooltip-placement="top" tooltip="Run this paragraph (Shift+Enter)"
          ng-click="runParagraph(getEditorValue())"
          ng-show="paragraph.status!='RUNNING' && paragraph.status!='PENDING' && paragraph.config.enabled"></span>
    <span class="icon-control-pause" style="cursor:pointer;color:#CD5C5C" tooltip-placement="top"
          tooltip="Cancel (Ctrl+{{ (isMac ? 'Option' : 'Alt') }}+c)"
          ng-click="cancelParagraph(paragraph)"
          ng-show="paragraph.status=='RUNNING' || paragraph.status=='PENDING'"></span>


    <!-- 
    <span class="{{paragraph.config.editorHide ? 'icon-size-fullscreen' : 'icon-size-actual'}}" style="cursor:pointer" tooltip-placement="top"
          tooltip="{{(paragraph.config.editorHide ? 'Show' : 'Hide')}} editor (Ctrl+{{ (isMac ? 'Option' : 'Alt') }}+e)"
          ng-click="toggleEditor(paragraph)"></span>

    <span class="{{paragraph.config.tableHide ? 'icon-notebook' : 'icon-book-open'}}" style="cursor:pointer" tooltip-placement="top"
          tooltip="{{(paragraph.config.tableHide ? 'Show' : 'Hide')}} output (Ctrl+{{ (isMac ? 'Option' : 'Alt') }}+o)"
          ng-click="toggleOutput(paragraph)"></span>
 -->
  </span>
</div>


  </div>

  <div ng-if="!asIframe" class="paragraphFooter">
    <div ng-show="!paragraph.config.tableHide && !viewOnly"
         id="{{paragraph.id}}_executionTime"
         class="executionTime" ng-bind-html="getExecutionTime(paragraph)">
    </div>
    <div ng-if = "paragraph.status === 'RUNNING'" class = "paragraphFooterElapsed">
      <div id="{{paragraph.id}}_elapsedTime"
           class="elapsedTime" ng-bind-html="getElapsedTime(paragraph)">
      </div>
    </div>
  </div>
</div>








    </div>
    <div class="new-paragraph" ng-click="insertNew('below');" ng-hide="!$last || viewOnly || asIframe || revisionView">
      <h4 class="plus-sign">&#43;</h4>
    </div>
  </div>
  <div style="clear:both;height:10px"></div>
</div>

这是页面中使用的控制器
笔记本控制器

app.controller('NotebookCtrl', NotebookCtrl);

NotebookCtrl.$inject = [
  '$scope',
  '$route',
  '$routeParams',
  '$location',
  '$rootScope',
  '$http',
  'websocketMsgSrv', 
  'baseUrlSrv',
  '$timeout',
  'ngToast',
  'noteVarShareService',
  'TRASH_FOLDER_ID'  ,
  'saveAsService',
  'noteActionSrv'

]; 

function NotebookCtrl($scope, $route, $routeParams, $location, $rootScope,
                      $http, websocketMsgSrv, baseUrlSrv, $timeout,
                      ngToast, noteVarShareService,saveAsService, noteActionSrv,TRASH_FOLDER_ID) {
///
}

段落控制器

'use strict';

    app.controller('ParagraphCtrl', ParagraphCtrl);

ParagraphCtrl.$inject = [
  '$scope',
  '$rootScope',
  '$route',
  '$window',
  '$routeParams',
  '$location',
  '$timeout',
  '$compile',
  '$http',
  '$q',
  'websocketMsgSrv',
  'baseUrlSrv',
  'ngToast',
  'saveAsService',
  'noteActionSrv',
  'noteVarShareService'
];

function ParagraphCtrl($scope, $rootScope, $route, $window, $routeParams, $location,
                       $timeout, $compile, $http, $q, websocketMsgSrv,
                       baseUrlSrv, ngToast, saveAsService,noteActionSrv,noteVarShareService) { 
//
} 

结果控制器

app.controller('ResultCtrl', ResultCtrl);

ResultCtrl.$inject = [
  '$scope',
  '$rootScope',
  '$route',
  '$window',
  '$routeParams',
  '$location',
  '$timeout',
  '$compile',
  '$http',
  '$q',
  '$templateRequest',
  '$sce',
  'websocketMsgSrv',
  'baseUrlSrv',
  'ngToast',
  'noteActionSrv',
  'saveAsService',
  'noteVarShareService',
  'heliumService'
];

function ResultCtrl($scope, $rootScope, $route, $window, $routeParams, $location,
                    $timeout, $compile, $http, $q, $templateRequest, $sce, websocketMsgSrv,
                    baseUrlSrv, ngToast,noteActionSrv,saveAsService,noteVarShareService, heliumService) {
////
} 

这就是路由

report-state.js

 .state('app.reports.zepplien', { 
           url: '/notebook/:noteId', 
           templateUrl: 'views/tmpl/reports/notebook.html',
           resolve: {
               translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {


                                            $translatePartialLoader.addPart('commons');
                                            $translatePartialLoader.addPart('menu');

                                            $translate.refresh();
                                            return $translate.refresh();}],

           }

       })

nav.html

    <a ui-sref="app.reports.zepplien({noteId: '2CBB836VW'})">
               <fa name="fa  fa-sitemap"></fa>
                   <span>DashBoard</span></a>

任何人都可以知道这个问题吗?

1 个答案:

答案 0 :(得分:1)

我发现了问题,ng-repeat中的第一个列表在后端是空的