Question

我对Ionic和AngularJS很新。我试图创建一个笔记应用程序，但我的controllers.js似乎并不理解services.js。我该怎么做才能解决这个问题。提前致谢。

这是我的代码看起来像

app.js

imgthreshold=cv2.inRange(img,cv2.cv.Scalar(3,3,125),cv2.cv.Scalar(40,40,255),)

controllers.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();
    }
  });
})
}());

services.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')
  };
});

的index.html

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;
    }
  }
});

list.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>

edit.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>

Answer 1

当您将其分成单独的文件时，请首先确保在index.html中加载文件

因此，对于index.html中需要的每个控制器或服务js文件

<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){})

每个模块都需要将其依赖的其他模块注入其中。例如，在我的应用程序中，我还将离子注入我的控制器和服务中。

这应该让它适合你。如果您希望我发布更多示例，请告诉我。

Answer 2

发现问题!!!
在controllers.js中，您无法结束控制器并启动另一个控制器。
如果要在同一个JS文件上使用多个控制器，则必须仅在最后一个控制器上使用分号 I.E.你有3个控制器

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

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

离子控制器和服务结构

2 个答案: