1

1 つの共通コントローラー (親) の子である 2 つのコントローラー (child1 と child2) 間でデータを共有しようとしています。index.html は次のとおりです。

<div ng-controller="parent">
    <ul>
    <p>Parent controller</p>
        <li ng-repeat="item in items">
            {{item.id}}
        </li>
    </ul>
    <div ng-controller="child1">
        <ul>
            <p>First DIV :</p>
            <li ng-repeat="item in items">
                {{item.id}}
            </li>
        </ul>
    </div>
    <div ng-controller="child2">
        <ul>
            <p>Second DIV :</p>
            <li ng-repeat="item in items">
                {{item.id}}
            </li>
        </ul>
    </div>
</div>

3 つのコントローラーを (parent, child1 および child2) として定義しました。

   var myApp = angular.module('myApp', []);

myApp.controller('parent',['$scope', function($scope) {
    $scope.items = [
        {'id':1},
        {'id':2},
        {'id':3},
        {'id':4}
    ];

    $scope.items.push({'id':10});

    $scope.myfun = function() {
        setTimeout(function(){
            $scope.items.push({'id':20});
            alert("inserting 20....!");
        },3000);
    }

    $scope.myfun(); 
}]);

myApp.controller('child1', ['$scope', function($scope) {
    $scope.items = $scope.$parent.items;

}]);

myApp.controller('child2', ['$scope', function($scope) {
    $scope.items = $scope.$parent.items;
}]);

しかし、ページには何も表示されていません。このコードの何が問題になっていますか?

4

1 に答える 1

2

$timeoutsetTimeout の代わりにangular のサービスを使用します。

myApp.controller('parent',['$scope','$timeout', function($scope, $timeout) {
    $scope.items = [
        {'id':1},
        {'id':2},
        {'id':3},
        {'id':4}
    ];

    $scope.items.push({'id':10});

    $scope.myfun = function() {
       $timeout(function(){
            $scope.items.push({'id':20});
            alert("inserting 20....!");
        },3000);
    }

    $scope.myfun(); 
}]);
于 2013-09-23T09:58:57.420 に答える