angularjs - ionicframework - 点击一行

时间:2014-08-18 13:34:15

标签: angularjs ionic-framework

我需要在触摸某个项目时打开一个新页面,但我无法使其工作,我不知道为什么。

这是我的HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>

        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>

        <!-- your app's js -->
        <script src="js/app.js"></script>
    </head>

    <body ng-app="starter" ng-controller="ClientsCtrl">

        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Elenco Clienti</h1>
            </ion-header-bar>

            <ion-content>
                <label class="item item-input">
                    <i class="icon ion-search placeholder-icon"></i>
                    <input type="search" placeholder="Cerca" ng-model="query[queryBy]">
                </label>
                <ion-list>
                    <ion-item ng-repeat="client in clients | filter:query" href="#/app/clients/{{ client.name }}">

                        <!-- <div class="row" on-hold="showActionsheet(client)"> -->
                            {{ client.name }}
                        <!-- </div> -->

                    </ion-item>
                </ion-list>
            </ion-content>

        </ion-pane>

        <div class="bar bar-footer bar-positive">
            <div class="title">
                <button class="button button-icon" ng-click="newClient()">
                    Aggiungi cliente <i class="icon ion-compose"></i>
                </button>
            </div>
        </div>

        <script id="new-client.html" type="text/ng-template">

            <div class="modal">

                <!-- Modal header bar -->
                <ion-header-bar class="bar-secondary">
                    <h1 class="title">Nuovo Cliente</h1>
                    <button class="button button-clear button-positive" ng-click="closeNewClient()">Annulla</button>
                </ion-header-bar>

                <!-- Modal content area -->
                <ion-content>

                    <form ng-submit="createClient(client)">
                        <div class="list">
                            <label class="item item-input">
                                <span class="input-label">Nome:</span>
                                <input type="text" ng-model="client.name">
                            </label>
                            <label class="item item-input">
                                <span class="input-label">Numero:</span> 
                                <input type="tel" ng-model="client.phone">
                            </label>
                        </div>
                        <div class="padding">
                            <button type="submit" class="button button-block button-positive">Inserisci cliente</button>
                        </div>
                    </form>

                </ion-content>

            </div>

        </script>

    </body>
</html>

这是我的app.js

// Clients App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

    /* Costruttore */   
    .factory('Clients', function(){
        return{
            all: function(){

                //Recupero tutti i clienti
                var clientsString = window.localStorage['clients'];

                //Se ci sono dati
                if( clientsString ){
                    //Restituisco i dati
                    return angular.fromJson(clientsString); 
                }               

                //Non c'è nulla
                return [];
            },
            save: function(clients){
                window.localStorage['clients'] = angular.toJson(clients);
            },
        }
    })

    .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider

        .state('app.single', {
          url: "/clients/:clientName",
          views: {
            'menuContent' :{
              templateUrl: "templates/client.html",
              controller: 'SingleCtrl'
            }
          }
        });
    })

    .controller('ClientsCtrl', function($scope,  $ionicModal, Clients, $ionicActionSheet){

        $scope.query = {}
        $scope.queryBy = 'name'

        // Load or initialize projects
        $scope.clients = Clients.all();

        $scope.orderProp="name"; 

        // Create and load the Modal
        $ionicModal.fromTemplateUrl('new-client.html', function(modal) {
                $scope.clientModal = modal;
            }, 
            {
                scope: $scope,
                animation: 'slide-in-up'
            }
        );

        // Called when the form is submitted
        $scope.createClient = function(client) {
            $scope.clients.push({
              name: client.name,
              phone: client.phone,
              data: new Date()
            });
            $scope.clientModal.hide();
            client.name = "";
            client.phone = "";
            Clients.save($scope.clients);
          };

          // Open our new task modal
          $scope.newClient = function() {
              $scope.clientModal.show();
          };

          $scope.closeNewClient = function() {
              $scope.clientModal.hide();
         };


         $scope.showActionsheet = function(client){

            $ionicActionSheet.show({
                titleText: 'Azioni',
                buttons: [
                    { text: 'Cancella selezionato' },
                ],

                destructiveText: 'Cancella tutto <i class="icon ion-trash-a"></i>',
                cancelText: 'Annulla',

                buttonClicked: function(index) {

                    if( index == 0 )
                    {                   
                        //E' una delete
                        $scope.clients.splice( $scope.clients.indexOf(bet), 1 );
                        Clients.save($scope.clients);
                    }

                    return true;
                },

                //Cancella tutto
                destructiveButtonClicked: function() {

                    //Libero L'array
                    $scope.clients = [];                    
                    Clients.save($scope.clients);

                    return true;
                }
            });
        };
})

.controller('SingleCtrl', function($scope, $stateParams) {
})
除了离子项目点击之外,一切都很有效:

<ion-item ng-repeat="client in clients | filter:query" href="#/app/clients/{{ client.name }}">

   <!-- <div class="row" on-hold="showActionsheet(client)"> -->
          {{ client.name }}
    <!-- </div> -->

 </ion-item>

当我点击它时,我想显示一个包含客户信息的新页面,我的代码有什么问题?

这是一个代码:http://codepen.io/anon/pen/ElAIz

1 个答案:

答案 0 :(得分:0)

而是href您应该使用ui.router中的ui-sref

示例:

ui-sref="app.clients({clientName:client.name})"