angularjs - 引用错误: ArticleService is not defined

Question

我几天都无法解决这个问题，检查了很多其他帖子，请帮忙。使用此页面中的示例: http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-your-ionic-app/

我正在使用

• ionic
• Cordova
• PouchDB
• AngularJS

我的环境

• Cordova CLI:5.3.1
• ionic 版本:1.1.0
• Ionic CLI 版本:1.6.5
• Ionic 应用程序库版本:0.3.9
• 操作系统:Mac OS X Mavericks
• Node 版本:v0.12.7

controllers.js

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

 .controller('OverviewCtrl', function($scope, $ionicPlatform) {
  var vm = this;

  // Initialize the database.
  $ionicPlatform.ready(function() {
    ArticleService.initDB();

    // Get all articles records from the database.
    ArticleService.getAllArticles().then(function(articles) {
      vm.articles = articles;
    });
  });
  
/*
  // Initialize the modal view.
  $ionicModal.fromTemplateUrl('templates/playlists.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });
*/
  
  vm.showAddArticleModal = function() {
    $scope.article = {};
  };

  vm.showEditArticleModal = function(article) {
    $scope.article = article;
  };

  $scope.saveArticle = function() {
      ArticleService.addArticle($scope.article);				
  };

  return vm;
})

Playlists.html

<ion-view view-title="List">
  <ion-content>        
    <ion-list>
      <ion-item ng-controller="OverviewCtrl as vm" ng-repeat="a in vm.articles" ng-click="vm.showEditArticleModal(a)">
        <div style="display: block;margin-left: auto;margin-right: auto">{{ a.image }}</div>
        <div style="float: center">{{ a.descr }}</div>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

services.js

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

.factory('ArticleService', ['$q', function($q) {
 
  var _db;    
  var _articles;

  return {
    initDB: initDB,

    getAllArticles: getAllArticles,
    addArticle: addArticle,
    
    ...
  };

  function initDB() {
    // Creates the database or opens if it already exists
    _db = new PouchDB('articles', {adapter: 'websql'});
  };

  function addArticle(article) {
    return $q.when(_db.post(article));
  };

  ...

}])

menu.html

...

<ion-item menu-close href="#/app/playlists">
  List
</ion-item>

...

apps.js

.state('app.playlists', {
  url: '/playlists',
  views: {
    'menuContent': {
      templateUrl: 'templates/playlists.html',
      controller: 'OverviewCtrl'
    }
  }
})

相机.html

 <ion-modal-view>
   ...
   
   <div class="padding">
      <button ng-controller="OverviewCtrl" ng-click="saveArticle()" class="button button-block button-positive activated">Spara</button>
    </div>
   
   ... 
</ion-modal-view>

我创建了一个 ArticleService 来保存camera.html 中的数据。问题已经在构建时出现，ArticleService 无法在 Controller 中引用。

Answer 1

当前您正在 OverviewCtrl 中使用 ArticleService，但您没有将其注入(inject)到 Controller 函数中。要修复它，请更改

.controller('OverviewCtrl', function($scope, $ionicPlatform) {

至

.controller('OverviewCtrl', function($scope, $ionicPlatform, ArticleService) {