我按照msdn上的說明構建了示例Apache Cordova,但是當它運行時,我沒有從輸出中獲取響應。輸出是類似於下面的圖像:在Visual Studio上的Apache Cordova示例不起作用
,但也沒有辦法添加/刪除條目列表。
我查了一下發現的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丟失,但如何我可以找到哪個文件丟失?
我還沒有自己嘗試過,但我想你在調試紋波模擬器時遇到了一個已知問題。這是與Visual Studio如何附加調試器相關的計時問題。嘗試刷新Chrome頁面,調試器將能夠停止在deviceready事件中。並再次嘗試查看是否可以觸發斷點。除了刷新之外,我們還可以在javascript控制檯中運行window.location.reload()。 –