2017-03-23 4 views
0

Ich weiß, dass diese Frage dupliziert ist, aber ich habe viel gesucht und ich kann es nicht lösen, ich möchte Seite in angulrJS App erstellen und es gibt keine Daten ohne Fehler auf der KonsoleangularJS Seite rendern nichts

diese

ist die Seite

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> 

und dies ist die verwendeten Controller in der Seite
Notebook-Controller

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) { 
/// 
} 

Absatz-Controller

'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) { 
// 
} 

Ergebnis-Controller

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) { 
//// 
} 

und dies wird Routing

Bericht-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> 

kann wissen, jemand das Problem?

+0

sorry für diese leer ist, ich umformatieren es –

+0

haben Sie versuchen gehen ..../Notebook /: noteId? – vict

+0

ja ich mache es statische ID und wenn ich diese Seite öffne es Routing auf die richtige URL 'Berichte/Notebook/2CBB836VW', aber keine Datenanzeige –

Antwort

1

i die Frage gefunden, die erste Liste in ng-Wiederholung aus dem Backend