Imagine creating an app like this:
<script>
myArray=<?php echo $array;?>;
app={
myArray:myArray,
myIndex:myArray.length-1,
back:function(){this.myIndex--;console.log("You clicked back");},
forward:function(){this.myIndex++}
}
</script>
Later on, you decide to integrate a UI using angularJS. You write the following code:
<div ng-app="myApp">
<div ng-controller="AppCtrl">
<div ng-repeat="value in myArray | slice:myIndex:myIndex+1">
<div ng-cick="back()">Back</div>
<div ng-bind="value"></div>
<div ng-cick="forward()">Forward</div>
</div>
</div>
</div>
You also include the following JavaScript code:
var myApp=angular.module('myApp', [])
myApp.filter('slice', function() {
return function(arr, start, end) {
return arr.slice(start, end);
};
});
myApp.controller("AppCtrl",function($scope){
$.extend($scope,app);
})
However, when you click the back button, the console logs "You clicked back" but the value does not change. Why is JQuery extend not working in this scenario and how can you fix this issue?