在angularjs中更改子范围的对象

时间:2013-05-06 08:30:25

标签: angularjs angularjs-scope

小提琴:http://jsfiddle.net/6RBJ5/1/

所以基本上我想从子范围中修改的父范围访问一个对象。

function Parent($scope) {
    $scope.data = null;
}

function Child($scope) { 
    $scope.data = [{id:1}, {id:2}]
}

HTML:

<div ng-controller="Parent">
  Data length: {{ data.length }}<br>
<div ng-controller="Child"></div>
</div>

然而长度不打印。任何想法如何解决这个问题?

2 个答案:

答案 0 :(得分:3)

One way

$scope.$parent.data = [{id:1}, {id:2}]

虽然感觉不对。

Another would be to create the empty array in the parent, and just modify it instead of replacing it in the child.

或许你真正需要的是use a service;这取决于你真正想要实现的目标。

定义服务:

var myApp = angular.module('myApp', []);
myApp.factory('tickets', function factory() {

    var tickets = [];

    function add(ticket){
        tickets.push(ticket);
    }
    function count(){
        return tickets.length;
    }

    return {
        add: add,
        count: count
    };

});

使用服务:

function Parent($scope, tickets) {
    $scope.tickets = tickets;
}

function Child($scope, tickets) {

    tickets.add({id:1}); 
    tickets.add({id:2});

}

HTML:

<div ng-controller="Parent">
    Data length: {{ tickets.count() }}<br>
    <div ng-controller="Child">       
    </div>
</div>

请注意控制器的清洁性和业务模型,并且您可以在一个地方干净地扩展票证概念,并通过将其注入控制器从任何地方访问它。您可以在不担心控制器之间的层次结构或关系或污染环境的情况下执行此操作。另一方面,如果您的应用程序非常简单,那么它可能会过度。

答案 1 :(得分:1)

我认为这是指有角度的全局变量的问题。最简单的方法是通过$ rootScope。

请参阅此Global variables in AngularJS

here