Problems with the Guide's app


#1

http://ionicframework.com/docs/guide/starting.html

Sections such as the following

 <link href="lib/css/ionic.css" rel="stylesheet">
 <script src="lib/js/ionic.bundle.js"></script>

have the wrong path compared to what is automatically in the project.


#2

The guide says to use the following command:

http://ionicframework.com/docs/guide/installation.html

ionic start hello

Then it says to delete some of the files (not all of the unused ones)

That command in fact created the tabs starter project.

It should have got you to create a blank project…

ionic start myApp blank

#3

It shouldn’t say what to put in the header (since that can change a lot) - it should just tell you what to put in the body…


#4

BTW the first section of code here

http://ionicframework.com/docs/guide/building.html

is missing a quote in the class declaration:

 <ion-header-bar class=bar-dark">

#6

http://ionicframework.com/docs/guide/building.html

  $scope.toggleProjects = function() {
    $scope.sideMenuController.toggleLeft();
  };

This only seems to hide the left menu, not show it…

  // Called to select the given project
  $scope.selectProject = function(project, index) {
    $scope.activeProject = project;
    Projects.setLastActiveIndex(index);
    $scope.sideMenuController.close();
  };

This doesn’t hide the side menu…

In the Firefox console it says:

Error: $scope.sideMenuController is undefined


#7

Thanks for pointing all these out. I will see about getting this updated.


#8

Any chance you could post a solution for the “Error: $scope.sideMenuController is undefined” issue while the documentation is being updated?


#9

I think we need to use $ionicSideMenuDelegate.

 .controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects) {
->
.controller('TodoCtrl', function($scope, $timeout, $ionicModal, $ionicSideMenuDelegate, Projects) {

  $scope.sideMenuController.toggleLeft();                                                
  ->
  $ionicSideMenuDelegate.toggleLeft();


  $scope.sideMenuController.close();                                                     
  ->
  $ionicSideMenuDelegate.toggleLeft(false);

#10

Also, in both ion-side-menu-content and ion-side-menu of www/index.html,

   <ion-content scroll="false">

should be

    <ion-content>

Otherwise, the list content doesn’t scroll.


#11

Thanks, your suggestion fixed the error I got when following the guide.

Just a suggestion: it might be better to replace $scope.sideMenuController.close() with $ionicSideMenuDelegate.toggleLeft(false). [See http://ionicframework.com/docs/api/service/$ionicSideMenuDelegate/]

In the Todo app it will probably not an issue, but by passing the false value the sidemenu will only be closed (if open) and not opened (if closed) when calling the delegate.

/Niels


#12

That’s right. I just updated my previous post.


#13

Yes, ionicSideMenuDelegate.toggleLeft() works.

Even better, you can do it in markup rather than in the controller using the menu-toggle directive:

      <button class="button button-icon" menu-toggle>
        <i class="icon ion-navicon"></i>
      </button>