Kann ich ein Objekt in angularjs erweitern?

Question

sagen, dass ich eine App wie folgt schreiben:

<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> 

Jetzt möchte ich eine Benutzeroberfläche hinzufügen, damit ich entscheiden AngularJS zu verwenden. Also schreibe ich dies:

<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> 

Auch bekam ich diesen

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); 
}) 

Dann habe ich den Zurück-Button klicken und die Konsolenprotokolle „Sie klickte zurück“, aber der Wert nicht ändert. Warum erweitert JQuery die Arbeit in dieser Situation nicht und wie kann ich das richtig funktionieren lassen?

Answer 1

$.extend wird gut funktionieren .. Aber .. Sie brauchen es nicht wirklich .. lesen/sehen this.

Ihr Problem zu beheben ... dies nur tun:

myApp.controller("AppCtrl",function($scope){ 
     $scope.app = app; 
    }) 

und.

<div ng-controller="AppCtrl"> 
    <div ng-repeat="value in app.myArray | slice:app.myIndex:app.myIndex+1"> 
     <button ng-click="app.back()">Back</button> 
     <div>{{value}}</div> 
     <button ng-click="app.forward()">Forward</button> 
    </div> 
    </div> 

Hoffe, dass Sie in die richtige Richtung weist.

Update

Eine Lösung wäre, den Controller, wie Syntax zu verwenden ... so

myApp.controller("AppCtrl",function(){ 
    angular.extend(this,app); 
}) 

und

<div ng-controller="AppCtrl as app"> 
    <div ng-repeat="value in app.myArray | slice:app.myIndex:app.myIndex+1"> 
     <button ng-click="app.back()">Back</button> 
     <div ng-bind="value"></div> 
     <button ng-click="app.forward()">Forward</button> 
    </div> 
    </div> 

Im ersten Beispiel $scope.app hat Kontext (weil sein der Besitzer von Forward, Back etc, die Sie gemischt haben).