Ионный контроллер и структура обслуживания

Я довольно новичок в Ionic и AngularJS. Я попытался создать приложение для заметок, но мои контроллеры.js, похоже, не понимали services.js. Что мне нужно сделать, чтобы исправить эту проблему. Заранее спасибо.Ионный контроллер и структура обслуживания

И это мой код выглядеть

app.js

(function() { 
var app = angular.module('starter', ['ionic', 'starter.controllers' ,'starter.services']) 

app.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider.state('list', { 
    url: '/list', 
    templateUrl : 'templates/list.html' 
    }); 

    $stateProvider.state('edit', { 
    url: '/edit/:Id', 
    templateUrl : 'templates/edit.html', 
    controller : 'EditCtrl' 
    }); 

    $stateProvider.state('add', { 
    url: '/add', 
    templateUrl : 'templates/edit.html', 
    controller : 'AddCtrl' 
    }); 

    $urlRouterProvider.otherwise('/list'); 
}); 

app.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
    // for form inputs) 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 
}());

controllers.js

angular.module('starter.controllers', []) 
.controller('ListCtrl', function($scope, NoteStore) { 
    $scope.notes = NoteStore.list(); 
}); 

.controller('EditCtrl', function($scope, $state, NoteStore) { 
    $scope.title = "Edit"; 
    $scope.note = angular.copy(NoteStore.get($state.params.Id)); 

    $scope.save = function() { 
    NoteStore.update($scope.note); 
    $state.go('list') 
    }; 
}); 

.controller('AddCtrl', function($scope, $state, NoteStore) { 
    $scope.title = "New Note"; 
    $scope.note = { 
    id: new Date().getTime().toString() 
    }; 

    $scope.save = function() { 
    NoteStore.create($scope.note); 
    $state.go('list') 
    }; 
});

services.js

angular.module('starter.services', []) 
.factory('NoteStore', function() { 
    var notes = []; 

    return { 
    list : function() { 
     return notes; 
    }, 

    get : function(noteId) { 
     for (var i = 0; i < notes.length; i++) { 
     if (notes[i].id === noteId) { 
      return notes[i]; 
     } 
     } 
     return undefined; 
    }, 

    create : function(note) { 
     notes.push(note); 
    }, 

    update : function(note) { 
     for (var i = 0; i < notes.length; i++) { 
     if (notes[i].id === note.id) { 
      notes[i] = note; 
      return; 
     } 
     } 
     return undefined; 
    } 
    } 
});

index.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"> 

    <script src="lib/ionic/js/ionic.bundle.js"></script> 
    <script src="cordova.js"></script> 

    <script src="js/app.js"></script> 
    <script src="js/controllers.js"></script> 
    <script src="js/services.js"></script>  
    </head> 
    <body ng-app="starter"> 

    <ion-pane> 
     <ion-nav-bar class="bar-assertive"> 
     <ion-nav-back-button class="button-clear"> 
      <i class="ion-arrow-left-c"></i> Back 
     </ion-nav-back-button> 
     </ion-header-bar> 
     <ion-nav-view> 
     </ion-nav-view> 
    </ion-pane> 
    </body> 
</html>

list.html

<ion-view view-title="My Notes"> 

    <ion-nav-buttons side="right"> 
    <a href="#/add" class="button icon ion-android-add"></a> 
    </ion-nav-buttons> 
    <ion-content ng-controller="ListCtrl"> 
     <div class = "list"> 
      <a href="#/edit/{{note.id}}" class = "item" ng-repeat = "note in notes"> 
       <h2>{{note.title}}</h2> 
       <p>{{note.description}}</p> 
      </a> 
     </div> 
    </ion-content> 
</ion-view>

edit.html

<ion-view view-title="{{title}}"> 
    <ion-content> 
     <div class="list card"> 
      <div class="item item-input"> 
       <input type="text" placeholder="Title" ng-model="note.title"> 
      </div> 
      <div class="item item-input"> 
       <textarea rows="5" placeholder="Description" ng-model="note.description"></textarea> 
      </div> 
     </div> 
     <div class="padding"> 
       <button class="button button-positive button-block" ng-click="save()">Save</button> 
     </div> 
    </ion-content> 
</ion-view>

источник

2015-09-06 lonewolf_911

Может быть вопрос опечатки, но в вашем состоянии «list» отсутствует ссылка на контроллер. –

Я уже добавляю ng-контроллер в ** list.html ** –

Когда я оставил все контроллеры в том же файле с ** app.js **, он работает. Но когда я пытаюсь разделить их на 2 файла, это больше не работает. –

Когда вы разделить его на отдельные файлы, сначала убедитесь, что вы загружаете файлы в index.html

так для каждого контроллера или служебного js-файла вам понадобится в вашем index.html

<script type="text/javascript" src="//path to js file"></script>

Следующая вещь, которую вам нужно сделать, это вводить свои услуги и контроллер в основной app.module, который вы сделали сделать здесь:

var app = angular.module('starter', ['ionic', 'starter.controllers' ,'starter.services'])

Кроме того, необходимо, чтобы ввести свой сервис в вас контроллер, который вам не сделал этого в

angular.module('starter.controllers', [])

вам нужно вводить 'stater.services'

так это должно выглядеть

angular.module('starter.controllers', ['starter.services'])

затем в контроллере вы можете вводить любой завод вам нужно

.controller('EditCtrl', function(NoteStore){})

каждый модуль должен иметь другие модули, это зависит от впрыскивается в него. Например, в моем приложении я также вставляю ионные данные в свои контроллеры и службы.

Это должно заставить его работать на вас. Если вы хотите, чтобы я опубликовал больше примеров, дайте мне знать.

источник

2015-09-07 00:08:50

Я уже пробовал это, но он все еще не работает. Я также пытался впрыснуть в каждый контроллер, но результата не было. Я делаю это на основе проекта шаблонов Tabs Ionic, и он выглядит точно таким же, но мой не работает –

Вы, должно быть, сделали что-то неправильно, впрыскивая его или не включили файлы в правильном порядке в свой index.html. Вопросы для заказа. Можете ли вы опубликовать свой индекс. Html-код? –

После еды я могу создать игровую площадку и настроить ее, если вы не можете заставить ее работать. –

Обнаружена проблема !!!
В контроллерах.js вы не можете закончить контроллер и запустить другой.
Если вы хотите использовать несколько контроллеров в одном JS-файле, вы должны использовать точку с запятой только на последнем контроллере.
I.E. У вас есть 3 контроллера

.controller('ListCtrl', function(){}) 
.controller('EditCtrl', function(){}) 
.controller('AddCtrl', function(){});

Только последний контроллер должен заканчивать точкой с запятой.

источник

2017-01-11 13:29:02

Ионный контроллер и структура обслуживания

ответ

Смежные вопросы