I am currently setting up a modal service as demonstrated in various instances such as here and here. I have come across the use of vm but do not completely grasp its purpose.
At line 13, there is the initialization of var vm = this; followed by usage of vm.. Does this action transform them into a model and expose them to the $scope?
In my attempt to pass an object to the modal that changes each time the modal is opened, I have previously achieved this by defining the object as a $scope variable.
The code used to open the modal is as follows:
$scope.openExercise = function(exercise) {
$scope.activeExercise = exercise;
myModals.openExercise(exercise)
.then(function(result) {
console.log()
}, function(err) {
alert(err);
});
};
Upon using console.log, I can see my complete object; however, it does not show up in the modal where I intend to display it as {{exercise.name}}, etc.
My initial query pertains to the utilization of var vm = this;. Secondly, how can I bind/pass my object for it to be displayed in the modal?
Thank you in advance.
EDIT - Modal Code Added
<ion-content class="has-subheader has-footer" lazy-scroll delegate-handle="modalContent">
<ion-slide-box ng-init="updateSlider()" ng-show="showimage" on-slide-changed="slideChanged(index)" class="exercise-slider-slides" does-continue="false" auto-play="false" show-pager="true">
<ion-slide ng-repeat="sliderimage in activeExercise.images track by $index">
<div ng-if="isNumber(sliderimage)" class="modalSliderThumbnail" style="background-image:url(http://.s3.amazonaws.com/medium/{{sliderimage}}.jpg)"></div>
<div ng-if="!isNumber(sliderimage)" class="modalSliderThumbnail" style="background-image:url({{sliderimage}})"></div>
</ion-slide>
</ion-slide-box>
<ion-list can-swipe="true" ng-hide="showimage">
<form>
<!-- <label class="item item-input item-stacked-label">
<span class="input-label energized">Title (Tap to edit)</span>
<input type="text" class="title-input" placeholder="" initial-value ng-model="activeExercise.exerciseName"></input>
</label> -->
<label class="item item-input item-stacked-label">
<span class="input-label energized">Description (Tap to edit)</span>
<textarea placeholder="Tap to add a Description" initial-value ng-model="activeExercise.exerciseDescription"></textarea>
</label>
</form>
<ion-item ng-click="showPopup()" class="item-icon-right param-button">
<i class="icon ion-ios-plus-outline"></i> <span class="energized">Tap to add Variables</span>
</ion-item>
<ion-item ng-repeat="param in activeExercise.Params track by $index" ng-click="showPopup(param)">
<strong>{{param.param}}</strong> : {{param.childParam}}
<ion-option-button class="ion-minus-circled assertive button-options" ng-click="deleteParam(param)"></ion-option-button>
</ion-item>
</ion-list>
<button class="button button-block button-gradient icon-right ion-ios-plus-outline add-to-programme-button" ng-click="addExerciseToProgramme(activeExercise, programme);showimage=true" ng-hide="showimage">Add to {{programme.programmeTitle}}</button>
</ion-content>