Question

我正在尝试通过设置Github repo上引用的Todo应用程序JSFiddle的本地存储来学习jQuery Mobile Angular适配器：

http://jsfiddle.net/ocdemo/UM5Mr/

我正在引用“独立”包，我假设包括jQM和Angular。 jQuery在控制台中可用，我测试过Angular模型正在运行。

但是，没有任何页面路由工作，也没有任何应用程序功能。我得到HTML标记，但无法获取任何应用程序方法。我注意到HTML中的任何地方都没有提到控制器。这是正常的吗？

是否可能是在localhost上运行此问题并使用secure.openkeyval.org？

的问题

我尝试从jqm-angular adapter 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);
    }
});

Answer 1

有点傻。由于以下原因引起了很大的冲击：

更改：

<script type="text/javascript" src="js/main.js"></script>

要：

<script src="js/main.js"></script>

带有角度代码的我的js文件根本没有加载，通过种植控制台日志发现，没有一个被解雇。

马克

如何在本地设置Jquery Mobile Angular Adapter Todo应用程序

1 个答案: