Help us understand the problem. What is going on with this article?

AngularJSで、あるコントローラーから別のコントローラーの$scopeへアクセスする方法

Angularjsで、あるコントローラー内でのイベント(ボタン押下など)によって、別のコントローラー内にある文字列を変更したい。。。なんてこと、ありませんか?

このような場合、つまり、あるコントローラーから別のコントローラーの$scopeへアクセスしたい場合の方法について、ちょっとハマったので、早速メモ。

で、結論から言いますと、それぞれのコントローラーの$scopeを、Factoryで共有させればいいんです!

では、以下で説明しますね。

まず、具体例として、以下のHTMLがあるとします。

<ソース(1)>

<!doctype html>
<html ng-app="app">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body>

<div ng-controller="ControllerA">
    <h2>ControllerA</h2>
    <button ng-click="buttonClick()">
        buttonClick on current scope
    </button>
    <button ng-click="buttonClickOnControllerB()">
        buttonClick on ControllerB's scope
    </button>
</div>

<div ng-controller="ControllerB">
    <h2>ControllerB</h2>
    <button ng-click="buttonClick()">
        buttonClick on current scope
    </button>
    <button ng-click="buttonClickOnControllerA()">
        buttonClick on ControllerA's scope
    </button>
</div>
</body>
</html>

で、app.jsは、以下のとおり。

<ソース(2)>

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

app.controller('ControllerA', function ($scope) {
    $scope.variable1 = "ControllerAだよ";

    $scope.buttonClick = function () {
        console.log("ControllerA");
        console.log("$scope::variable1", $scope.variable1);
    };
});

app.controller('ControllerB', function ($scope) {
    $scope.variable1 = "ControllerBだよ";

    $scope.buttonClick = function () {
        console.log("ControllerB");
        console.log("$scope::variable1", $scope.variable1);
    };
});

そして、ControllerA内の$scopeと、ControllerB内の$scopeをお互いに共有させるには、以下のFactoryを作ります。

<ソース(3)>

app.factory('SharedScopes', function ($rootScope) {
    var sharedScopes = {};

    return {
        setScope: function (key, value) {
            sharedScopes[key] = value;
        },
        getScope: function (key) {
            return sharedScopes[key];
        }
    };
});

で、上記のソース(3)を、ソース(2)に取り込むと、以下の感じ。

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

app.controller('ControllerA', function ($scope, SharedScopes) {  ココ

    SharedScopes.setScope('ControllerA', $scope); ← ココ

    $scope.variable1 = "ControllerAだよ";

    ・・・   
});

app.controller('ControllerB', function ($scope, SharedScopes) { ← ココ

    SharedScopes.setScope('ControllerB', $scope); ← ココ

    $scope.variable1 = "ControllerBだよ";

    ・・・   
});

そして、今までの内容を全て記載した、app.jsは、以下の通り。

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

app.controller('ControllerA', function ($scope, SharedScopes) {

    SharedScopes.setScope('ControllerA', $scope);

    $scope.variable1 = "ControllerAだよ";

    $scope.buttonClick = function () {
        console.log("ControllerA");
        console.log("ControllerA::variable1", Scopes.getScope('ControllerA').variable1);
        console.log("ControllerB::variable1", Scopes.getScope('ControllerB').variable1);
        console.log("$scope::variable1", $scope.variable1);
    };

    $scope.buttonClickOnControllerB = function () {
        Scopes.get('ControllerB').buttonClick();
    };
});
app.controller('ControllerB', function ($scope, SharedScopes) {

    SharedScopes.setScope('ControllerB', $scope);

    $scope.variable1 = "ControllerBだよ";

    $scope.buttonClick = function () {
        console.log("ControllerA");
        console.log("ControllerA::variable1", Scopes.getScope('ControllerA').variable1);
        console.log("ControllerB::variable1", Scopes.getScope('ControllerB').variable1);
        console.log("$scope::variable1", $scope.variable1);
    };

    $scope.buttonClickOnControllerA = function () {
        Scopes.get('ControllerA').buttonClick();
    };
});
app.factory('SharedScopes', function ($rootScope) {
    var sharedScopes = {};

    return {
        setScope: function (key, value) {
            sharedScopes[key] = value;
        },
        getScope: function (key) {
            return sharedScopes[key];
        }
    };
});

いかがだったでしょうか?

良かったら、是非、参考にしてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away