Passing Variable from Controller to Template

ionic-v1
1

I’m trying to pass a variable (id) from template to JS to template, I want to load the job details from a database but I need to figure this out and move to the next step.

Controllers:

angular.module('app.controllers', [])
  
.controller('menuCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {


}])
   
.controller('jobRequestsCtrl', ['$scope', '$stateParams', '$state', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, $state) {

	$scope.viewJob = function(id){
		$state.go('tabsController.jobDetails', {id:id})
	}

}])
   
.controller('appliedCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {


}])
   
.controller('myJobsCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {


}])
      
.controller('profileCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {


}])
   
.controller('jobDetailsCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {

  	$scope.id = $stateParams.id;
	console.log($stateParams.id);

}])

Routes:

angular.module('app.routes', [])

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider
    

      .state('tabsController.jobRequests', {
    url: '/page2',
    views: {
      'tab1': {
        templateUrl: 'templates/jobRequests.html',
        controller: 'jobRequestsCtrl'
      }
    }
  })

  .state('tabsController.applied', {
    url: '/page3',
    views: {
      'tab2': {
        templateUrl: 'templates/applied.html',
        controller: 'appliedCtrl'
      }
    }
  })

  .state('tabsController.myJobs', {
    url: '/page4',
    views: {
      'tab3': {
        templateUrl: 'templates/myJobs.html',
        controller: 'myJobsCtrl'
      }
    }
  })

  .state('tabsController', {
    url: '/page1',
    templateUrl: 'templates/tabsController.html',
    abstract:true
  })

  .state('tabsController.profile', {
    url: '/page5',
    views: {
      'tab4': {
        templateUrl: 'templates/profile.html',
        controller: 'profileCtrl'
      }
    }
  })

  .state('tabsController.jobDetails', {
    url: '/page6',
    views: {
      'tab1': {
        templateUrl: 'templates/jobDetails.html',
        controller: 'jobDetailsCtrl',
        params: { searchTerm: null }
      }
    }
  })

$urlRouterProvider.otherwise('/page1/page2')


});

Page 1 Template:

<ion-view title="Job Requests" id="page2">
  <ion-content padding="true" class="has-header">
    <ion-list id="jobRequests-list3">
      <ion-item ng-click="viewJob(1)" class="item-thumbnail-left" id="jobRequests-list-item4">
        <img class="cLogo">
        <h3>AED 100</h3></img>
        <h2>Company Name</h2>
        <p>0 Hours</p>
        <p>11-01-2017 to 12-01-2017</p>
      </ion-item>
      <ion-item class="item-divider" id="jobRequests-list-item-divider1"></ion-item>
      <ion-item class="item-thumbnail-left" id="jobRequests-list-item5" >
        <img class="cLogo">
        <h3>AED 100</h3></img>
        <h2>Company Name</h2>
        <p>0 Hours</p>
        <p>11-01-2017 to 12-01-2017</p>
      </ion-item>
      <ion-item class="item-divider" id="jobRequests-list-item-divider2"></ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Page 2 Template: Where I want the id to show

<ion-view title="Job Details" id="page6">
  <ion-content padding="true" class="has-header"></ion-content>
  <p>{{ stateParams.id }}</p>
</ion-view>

I tried everything, any help is appreciated!

2

Your template will show your scope variables. Here, id is in your scope variable, so directly pass it.

<ion-view title="Job Details" id="page6">
  <ion-content padding="true" class="has-header"></ion-content>
  <p>{{ id }}</p>
</ion-view>