我可以使作用域擴展angularjs中的對象嗎？

Question

假設我寫了一個這樣的應用程序：

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

現在，我想添加一個UI，因此決定使用angularJS。 所以我這樣寫：

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

我也明白了

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

然后，我單擊“后退”按鈕，控制台將記錄“您單擊了后退”，但該值未更改。 為什么在這種情況下JQuery無法擴展工作，我如何才能使其正常工作？

Answer 1

$.extend可以正常工作..但是..您實際上並不需要它..閱讀/觀看此內容 。

要解決您的問題...只需執行以下操作：

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

和。

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

希望能為您指明正確的方向。

更新

一種解決方案是將控制器用作語法...因此

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

和

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

在第一個示例中， $scope.app具有上下文（因為您混入了其中的forward，back等所有者）。