我能否在AngularJS中使范围扩展一个对象？

Question

我能否在AngularJS中使范围扩展一个对象？

5

假设我写了一个类似这样的应用：

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

现在我想添加一个用户界面，所以我决定使用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 extend 在这种情况下不起作用，我该如何使其正常工作？

- Nick Manning

$.extend会很好用...但是...请阅读/观看此链接：https://github.com/angular/angular.js/wiki/Understanding-Scopes。 - calebboyd

1

为什么?!? 你为什么要从你的代码中删除空格来刺痛我们的眼睛？ - hypno7oad

你在说什么，@hypno7oad？ - Nick Manning

1

返回：function(){this.myIndex--;console.log("您点击了返回");}这段代码中没有空格。如果像下面这样写，它会更易读：

返回：function(){
    this.myIndex--;
    console.log("您点击了返回");
}

唉...我不能在评论中格式化。 :/ - hypno7oad

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- calebboyd · Accepted Answer

$.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 等混合在一起的所有者）。