0

別のスコープにある ng-repeat に値を設定しようとしているこのフィドルの例があります。これは、私が解決しようとしているより大きな問題の非常に基本的な例です。基本的に、Angular がそれに応じてテンプレートを更新するように、ng-repeat に変数を設定する必要があります。問題は、テンプレートが子コントローラーにあることです。だから私は $controller 注入可能を使用して変数にアクセスします。ただし、この変数を更新しても、テンプレートは更新されません。scope.$apply() を実行しても。誰にもアイデアはありますか？これを行う別の方法がわかりません...

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

myApp.directive("custdirective", function() {
    return {
        restrict: 'A',
        scope: 'false',
        link: function(scope, element, attr) {
            element.on("click", function() {
            anotherscope.addList();
            });
        }
    }
});

function AnotherController($scope) {
    $scope.listtwo = new Array();
    $scope.addList = function() {
        $scope.listtwo = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    }
}

function MyCtrl($scope, $controller, $rootScope) {
    anotherscope = $rootScope.$new();
    $scope.anothercontroller = $controller(AnotherController, {
        $scope: anotherscope
    });
}​

これを正しく行うには、サービスを作成します。ここでこれを行う正しい方法の更新されたフィドルを作成しましたまたは:

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

myApp.factory("mySharedService", function($rootScope) {
    var sharedService = {};
    sharedService.message = '';

    sharedService.prepForBroadcast = function() {
        this.message = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        this.broadcastItem();
    };
    sharedService.broadcastItem = function() {
        $rootScope.$broadcast('handleBroadcast');
    };

    return sharedService;

});

myApp.directive("custdirective", function() {
    return {
        restrict: 'A',
        scope: 'false',
        link: function(scope, element, attr) {
            element.on("click", function() {
                debugger;
                scope.handleClick();
            });
        }
    }
});

function AnotherController($scope, sharedService) {
    $scope.listtwo = new Array();
    $scope.addList = function() {
        $scope.listtwo = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    }

    $scope.$on('handleBroadcast', function() {
        $scope.listtwo = sharedService.message;
    $scope.$apply();
    });
}

function MyCtrl($scope, sharedService) {
    $scope.handleClick = function() {
        sharedService.prepForBroadcast();
    };
}


MyCtrl.$inject = ['$scope', 'mySharedService'];        

AnotherController.$inject = ['$scope', 'mySharedService'];​
4

1 に答える 1

3

このようにスコープを渡すのは少し不安定で、Angular アプリケーションのテスト容易性を損なうことはほぼ確実です。

コントローラーとディレクティブの間で変更を仲介するサービスを作成したほうがよいと思います。サービスには、更新したい配列、またはディレクティブから呼び出したい関数のいずれかが含まれます。

残念ながら、そのようなサービスの例を書き上げるのは難しい.

于 2012-11-21T17:03:12.960 に答える