【发布时间】：2014-02-21 04:13:57
【问题描述】：
我正在尝试通过设置 Github 存储库中引用的 Todo 应用 JSFiddle 的本地存储库来学习 jQuery Mobile Angular 适配器：
http://jsfiddle.net/ocdemo/UM5Mr/
我指的是“独立”包，我假设它包括 jQM 和 Angular。 jQuery 在控制台中可用，我已经测试过 Angular 模型可以正常工作。
但是，页面路由都不起作用，应用功能也不起作用。我获得了 HTML 标记，但无法触发任何应用程序方法。我注意到在 HTML 中的任何地方都没有提到控制器。这正常吗？
这可能是在 localhost 上运行它并使用 secure.openkeyval.org 的问题吗？
我尝试从 jqm-angular 适配器 repo 中提取所有 util js 文件。
我觉得我在这里缺少一些基本的东西。对这位 Angular 新手的任何帮助表示赞赏。
谢谢。
这是我的 HTML：
<!DOCTYPE="HTML">
<html ng-app>
<head>
<style>
.ui-input-text,
.ui-select {
width: 100% !important;
padding: 0.4em 0 !important;
}
</style>
<title>TodoMobile</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<script src="lib/jquery-mobile-angular-adapter-standalone.min.js" type="text/javascript"></script>
<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css">
<script type="text/javascipt" src="lib/utils/event.js"></script>
<script type="text/javascipt" src="lib/utils/if.js"></script>
<script type="text/javascipt" src="lib/utils/sharedController.js"></script>
<script type="text/javascipt" src="lib/utils/waitDialog.js"></script>
<script type="text/javascipt" src="lib/utils/paging.js"></script>
<script type="text/javascipt" src="js/app.js"></script>
</head>
<body ng-app="todo">
<div id="main" data-role="page" ngm-pagebeforeshow="refreshTodos()" ngm-swipeleft="showSettings()">
<div data-role="header">
<h1>Todos</h1>
<a href="" id="saveTodos" data-role="button" ngm-vclick="saveTodos()">Save</a>
<a href="settings" data-role="button">Settings</a>
</div>
<div data-role="content">
<!-- test angular -->
<input type="text" ng-model="testing">
<div>{{testing}}</div>
<div data-role="fieldcontain">
<form ng-submit="addTodo()" data-ajax="false">
<input type="text" id="inputText" ng-model="$parent.inputText" placeholder="enter your todo here" ng-model-instant>
</form>
</div>
<form data-role="controlgroup">
<label ng-repeat="todo in todos | paged:'pager':5">
{{todo.name}}
<input type="checkbox" ng-model="todo.done" id="checked">
</label>
<div ngm-if="pager.hasMore">
<a href="#" ngm-vclick="pager.loadMore()" data-role="button">Load more</a>
</div>
</form>
</div>
</div>
<div id="settings" data-role="page" ngm-swiperight="back()">
<div data-role="header">
<h1>Settings</h1>
<a href="" id="saveSettings" data-role="button" data-rel="back">Save</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<input type="text" id="storageKey" ng-model="$parent.storageKey" placeholder="enter your storage key here">
</div>
</div>
</div>
</body>
</html>
这是我的 JS：
var module = angular.module("todo", []);
module.config(function($routeProvider) {
$routeProvider.when('/settings', {
templateUrl: '#settings',
jqmOptions: {transition: 'slide'}
});
});
module.factory('todoStore', function($http, $waitDialog) {
console.log('set up read/write');
var readUrl = 'https://secure.openkeyval.org/';
var writeUrl = 'https://secure.openkeyval.org/store/?';
function read(key) {
console.log('read');
$waitDialog.show();
return $http({
method: 'JSONP',
url: readUrl + key +'?callback=JSON_CALLBACK'
}).then(function(response) {
$waitDialog.hide();
return response.data;
});
}
function write(key, value) {
console.log('write');
$waitDialog.show();
value = encodeURIComponent(JSON.stringify(value));
$http({
method: 'JSONP',
url: writeUrl + key + '=' + value +'&callback=JSON_CALLBACK'
}).then(function() {
$waitDialog.hide();
});
}
return {
read: read,
write: write
}
});
module.controller('TodoController', function($scope, $history, $location, todoStore) {
$scope.storageKey = 'JQueryMobileAngularTodoapp';
$scope.data = {
todos: [],
inputText: ''
};
$scope.addTodo = function() {
console.log('adding todo');
$scope.todos.push({name: $scope.inputText, done: false});
$scope.inputText = '';
};
$scope.showSettings = function() {
console.log('show settings');
$location.url("/settings");
};
$scope.back = function() {
$history.goBack();
};
$scope.refreshTodos = function() {
todoStore.read($scope.storageKey).then(function(data) {
if (!data) {
data = [];
}
$scope.todos = data;
});
};
$scope.saveTodos = function() {
// delete all checked todos
var newTodos = [], todo;
for (var i=0; i<$scope.todos.length; i++) {
todo = $scope.todos[i];
if (!todo.done) {
newTodos.push(todo);
}
}
$scope.todos = newTodos;
todoStore.write($scope.storageKey, $scope.todos);
}
});
【问题讨论】：
标签： angularjs jquery-mobile adapter local