2015-06-16 48 views
0

我按照msdn上的說明構建了示例Apache Cordova,但是當它運行時,我沒有從輸出中獲取響應。輸出是類似於下面的圖像:在Visual Studio上的Apache Cordova示例不起作用

enter image description here

,但也沒有辦法添加/刪除條目列表。

我查了一下發現的index.html有下面幾行:

<button class="templateLeft templateToggle" ng-class="{'checked': toDoItem.done, 'unchecked': !toDoItem.done}" ng-mousedown="toggleToDoDone(toDoItem)"></button> 
    <button class="templateLeft templateRemove" ng-click="removeToDo(toDoItem)"></button> 

,但也沒有辦法增加新的項目清單?

這個示例代碼有什麼問題,導致UI無法正常工作?

示例使用angular.js

編輯1:

要了解爲何樣品不工作,爲什麼我沒有得到正確的結果,我試着調試的javascrip代碼。根據我的理解,這時候它的代碼是如下頁面:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <script src="cordova.js"></script> 
    <script src="scripts/platformOverrides.js"></script> 
    <script src="scripts/frameworks/angular.min.js"></script> 
    <script src="scripts/frameworks/angular-resource.min.js"></script> 
    <title>AngularJSToDo</title> 

    <!-- AngularJSToDo references --> 
    <link href="css/index.css" rel="stylesheet" /> 
</head> 
<body ng-app="xPlat"> 
    <section id="todoapp" ng-controller="ToDoCtrl"> 
     <header id="header"> 
      <div id="headerBand"></div> 
      <input id="new-todo" placeholder="What needs to be done?" ng-text-change="addToDo()" ng-model="newToDoText" autofocus> 
     </header> 
     <section id="main"> 
      <div id="todo-list"> 
       <div class="templateWrapper" ng-repeat="toDoItem in todos"> 
        <div class="templateContainer"> 
         <input class="templateTitle" ng-class="{crossedOut: toDoItem.done}" type="text" ng-text-change="changeToDoText(toDoItem)" ng-model="toDoItem.text" /> 
         <h3 class="templateAddress">{{toDoItem.address}}</h3> 
         <button class="templateLeft templateToggle" ng-class="{'checked': toDoItem.done, 'unchecked': !toDoItem.done}" ng-mousedown="toggleToDoDone(toDoItem)"></button> 
         <button class="templateLeft templateRemove" ng-click="removeToDo(toDoItem)"></button> 
        </div> 
        <div class="templateBorder"></div> 
       </div> 
      </div> 
     </section> 
    </section> 

    <script src="scripts/index.js"></script> 
</body> 
</html> 

在index.js的函數被調用: 的index.js源情況如下:

(function() { 
'use strict'; 
angular.module('xPlat', ['xPlat.services', 'xPlat.controllers', 'xPlat.directives']); 
angular.module('xPlat.directives', []); 
angular.module('xPlat.controllers', []); 
angular.module('xPlat.services', ['ngResource']); 
})(); 

我把一個斷點,在這條線:

angular.module('xPlat', ['xPlat.services', 'xPlat.controllers', 'xPlat.directives']); 

並運行應用程序,但應用不就行了(顯然,在index.js不加載,如果加載停止,這不是R UN)

要查看文件是否在正確的地方存在,我運行應用程序,它是在波動仿真器加載後,我改變了網頁瀏覽器的網址是:

http://localhost:4400/scripts/index.js 

和我可以在屏幕上看到index.js文本。

爲什麼當我加載頁面時這個函數沒有運行?

編輯2

做一些嘗試和錯誤之後,我發現我越來越JS控制檯上這些錯誤:

Failed to load resource: the server responded with a status of 404 (Not Found) 
ripple.js (50,28958) 


Error: [ng:areq] http://errors.angularjs.org/1.3.16/ng/areq?p0=ToDoCtrl&p1=not%20a%20function%2C%20got%20undefined 
    at Error (native) 
    at http://localhost:4400/scripts/frameworks/angular.min.js:6:417 
    at Sb (http://localhost:4400/scripts/frameworks/angular.min.js:19:510) 
    at La (http://localhost:4400/scripts/frameworks/angular.min.js:20:78) 
    at http://localhost:4400/scripts/frameworks/angular.min.js:75:465 
    at http://localhost:4400/scripts/frameworks/angular.min.js:57:178 
    at q (http://localhost:4400/scripts/frameworks/angular.min.js:7:428) 
    at M (http://localhost:4400/scripts/frameworks/angular.min.js:57:45) 
    at g (http://localhost:4400/scripts/frameworks/angular.min.js:51:409) 
    at g (http://localhost:4400/scripts/frameworks/angular.min.js:51:426) 
angular.min.js (102,443) 

它是從第一個錯誤出現的somefile丟失,但如何我可以找到哪個文件丟失?

+0

我還沒有自己嘗試過,但我想你在調試紋波模擬器時遇到了一個已知問題。這是與Visual Studio如何附加調試器相關的計時問題。嘗試刷新Chrome頁面,調試器將能夠停止在deviceready事件中。並再次嘗試查看是否可以觸發斷點。除了刷新之外,我們還可以在javascript控制檯中運行window.location.reload()。 –

回答

0

我相信你在這個指導中沒有經歷過所有的部分。

請繼續關注,您將在「添加數據模型」部分中提到的services.js中找到所需的功能。數據模型和相關功能在那裏定義。

+0

謝謝,我試圖調試代碼,以找到它爲什麼不工作,我發現index.js中的函數未被調用,我將更新問題並添加關於我所做的和我所得到的信息。 – mans

+0

增加了一些更詳細的信息。你可以看看它,並幫助我的任何建議,你可能有嗎? – mans

0

要添加條目到TODO列表中,只需點擊「需要做什麼?」,開始輸入並在完成後按回車鍵。要刪除一個條目,只需點擊該條目,您將會看到左側的刪除按鈕,點擊它並且該條目已不存在,並將該條目標記爲「完成」,只需點擊左側的複選框即可。

我剛剛使用Android Ripple Nexus(Galaxy)運行示例,它工作正常。事實上,你到了你附帶的樣本的初始頁面告訴我你很好去。我也得到404上的漣漪,但這並不會停止運行示例(我必須調查爲什麼會出現該錯誤)

最後,如果添加條目不適用於您,請在解決方案資源管理器上雙擊toDoCtrl。 js在www/scripts/controllers中創建文件,並在ToDoCtrl.prototype.addToDo函數內設置一個斷點,按F5並嘗試添加一個條目,只要輸入文本並按回車就應該點擊斷點。

相關問題