Passing data in master detail view in Ionic using this (NOT Scope)? - angularjs

Question

UPDATE
The service seem to be fetching data but when the data is sent to controller, it is undefined. Adding the service.js file for reference as well
service.js
.service('VideosModel', function ($http, Backand) {
var service = this,
baseUrl = '/1/objects/',
objectName = 'videos/';
function getUrl() {
return Backand.getApiUrl() + baseUrl + objectName;
}
function getUrlForId(id) {
return getUrl() + id;
}
service.all = function () {
console.log($http.get(getUrl()));
return $http.get(getUrl());
};
service.fetch = function (id) {
console.log('Inside s');
console.log($http.get(getUrlForId(id)));
return $http.get(getUrlForId(id));
};
service.create = function (object) {
return $http.post(getUrl(), object);
};
service.update = function (id, object) {
return $http.put(getUrlForId(id), object);
};
service.delete = function (id) {
return $http.delete(getUrlForId(id));
};
})
Pic
I am trying to implement the master-detail view on one of the tabs in my app using this instead of scope (example using scope here). But my details view is not getting the data/ it is saying undefined for detailsCtrl. I believe I'm making a mistake in my controller or app.js but I don't really have an idea about how to fix it.
master.html
<ion-view view-title="Videos">
<div ng-if="!vm.isCreating && !vm.isEditing">
<ion-content class="padding has-header">
<!-- LIST -->
<div class="row gallery">
<div class="list card col col-25" ng-repeat="object in vm.data"
ng-class="{'active':vm.isCurrent(object.id)}">
<a class="cardclick" href="#/details/{{object.id}}">
<div class="item item-image">
<img ng-src="{{object.img}}"/>
</div>
<div class="item item-icon-left assertive">
<i class="icon ion-play"></i>
<p> Watch</p>
<h2> {{object.title}} </h2>
</div>
</a>
</div>
</div>
</ion-content>
</div>
details view or videoplayer.html
<ion-view title="Now Playing" hide-nav-bar="true">
<div class="modal transparent fullscreen-player">
<video src="{{object.src}}" class="centerme" controls="controls" autoplay></video>
</div>
app.js
$stateProvider
// setup an abstract state for the tabs directive
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl as login'
})
.state('forgotpassword', {
url: '/forgot-password',
templateUrl: 'templates/forgot-password.html',
})
.state('tab', {
url: '/tabs',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.videos', {
url: '/videos',
views: {
'tab-videos': {
templateUrl: 'templates/tab-videos.html',
controller: 'VideosCtrl as vm'
}
}
})
.state('tab.games', {
url: '/games',
views: {
'tab-games': {
templateUrl: 'templates/tab-games.html'
}
}
})
.state('tab.help', {
url: '/help',
views: {
'tab-help': {
templateUrl: 'templates/tab-help.html'
}
}
})
.state('details', {
url: "/details/:id",
templateUrl: 'templates/videoplayer.html',
controller: 'detailsCtrl as vm'
});
$urlRouterProvider.otherwise('/login');
$httpProvider.interceptors.push('APIInterceptor');
})
controller
.controller('VideosCtrl', function (VideosModel, $rootScope) {
var vm = this;
function goToBackand() {
window.location = 'http://docs.backand.com';
}
function getAll() {
vm.data=[];
VideosModel.all()
.then(function (result) {
vm.data = result.data.data;
console.log(vm.data);
});
}
function initCreateForm() {
vm.newObject = {name: '', description: ''};
}
function setEdited(object) {
vm.edited = angular.copy(object);
vm.isEditing = true;
}
function isCurrent(id) {
return vm.edited !== null && vm.edited.id === id;
}
function cancelEditing() {
vm.edited = null;
vm.isEditing = false;
}
function cancelCreate() {
initCreateForm();
vm.isCreating = false;
}
function clearData(){
vm.data = null;
}
function create(object) {
VideosModel.create(object)
.then(function (result) {
cancelCreate();
getAll();
});
}
function update(object) {
VideosModel.update(object.id, object)
.then(function (result) {
cancelEditing();
getAll();
});
}
function deleteObject(id) {
VideosModel.delete(id)
.then(function (result) {
cancelEditing();
getAll();
});
}
vm.edited = null;
vm.isEditing = false;
vm.isCreating = false;
vm.getAll = getAll;
vm.create = create;
vm.update = update;
vm.delete = deleteObject;
vm.setEdited = setEdited;
vm.isCurrent = isCurrent;
vm.cancelEditing = cancelEditing;
vm.cancelCreate = cancelCreate;
vm.goToBackand = goToBackand;
vm.isAuthorized = false;
$rootScope.$on('authorized', function () {
vm.isAuthorized = true;
getAll();
});
$rootScope.$on('logout', function () {
clearData();
});
if(!vm.isAuthorized){
$rootScope.$broadcast('logout');
}
initCreateForm();
getAll();
})
.controller('detailsCtrl',function($stateParams,VideosModel){
var vm = this;
var videoId = $stateParams.id;
function getforId(id) {
vm.data=[];
VideosModel.fetch(id)
.then(function (result) {
vm.data = result.data.data;
console.log(vm.data);
});
}
getforId(videoId);
});
How do pass the data using this?

Answer 1

In order to use controllerAs syntax (bind your scope properties to 'this' in the controller) you need to give your controller an alias in the html.
<div ng-controller="detailsCtrl as vm">
By default, your html is going to reference $scope on your controller unless you give it an alias.
https://docs.angularjs.org/api/ng/directive/ngController