离子控制器和服务结构

我是Ionic和AngularJS的新手。我试图创建一个笔记应用程序，但我的controllers.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'状态缺少一个控制器引用。 –

我已经在** list.html ** –

上添加了一个ng控制器当我用** app.js **将所有控制器放在同一个文件中时，它就可以工作。但是，当我尝试将它们分成两个文件时，它不再起作用。 –

当你将其分离成单独的文件首先确保你在你的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

我已经尝试过，但它仍然无法正常工作。我也尝试注入每个控制器，但没有结果。我是基于Ionic的Tabs模板项目制作的，它看起来完全一样，但我的工作不起作用 –

您必须在注入或不在index.html中包含正确顺序的文件时做了一些错误的操作。订单很重要。你能发布你的索引吗？ Html代码？ –

我吃完后我可以制作一个离子操场，如果你不能工作，也可以设置它。 –

发现问题!!!
在controllers.js中，您不能结束控制器并启动另一个控制器。
如果您想在同一个JS文件上使用多个控制器，则只能在最后一个控制器上使用分号。
I.E.您有3个控制器

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

只有最后一个控制器必须以分号结尾。

来源

2017-01-11 13:29:02

离子控制器和服务结构

回答

相关问题