fineder, LLC.

to derive fine.

[AngularJS]コントローラー外の関数から、他のコントローラーを操作する。


本日もAngularJSの話。
他の関数やらコントローラーから、他のコントローラーの値を操作したい、という要望は要望として当然あると思います。
それをやってみようということで、コード書いてみました。

思いのほか苦戦しました(-ロ-;

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script>
        function MyCtrl($scope) {
            $scope.test="test string"

        };
            
        function changeValue(){
            var testScope = angular.element(sampleScope).scope();
            testScope.$apply(function(){
                testScope.test="OK";
                alert("OK");
            })

        };

            
    </script>

    </head>
    <body ng-app>
        <section id="sampleScope" ng-controller="MyCtrl">        
            {{test}}<input ng-model="test" >
        
        <input type="button" value="change value" onclick="changeValue()"/>
            </section>
    </body>
</html>

動作サンプルはこちら。

コントローラー「sampleScope」を作って、”test string”という値を初期値としてセットしています。で、関数「changeValue」をボタンクリックで起動して、sampleScope内のtestを更新してやろうというものです。

いろいろ詰まる

まずいきなり詰まったのが、関数の呼び出し。
ng-clickが使えるかと思いきや使えず。。。
仕方なしにonclickイベントにとりあえずしました。
たぶん関数も呼び出せると思うんだけどなぁ。

その2はここ↓の記述。

var testScope = angular.element(sampleScope).scope();

これはangular.element()という関数で、画面内のオブジェクトを取得している部分です。Jqueryの$(“#****”).attr みたいなもんだと思います。

この部分を以下のように、書くと動きません。

var testScope = angular.element('#sampleScope').scope();

なんでだ。。。。

ちなみにここのサイトだと、この書き方で動いてます。
バージョンの違いかもしれないですね

この二つの部分でちょっと詰まりました。

$apply

            testScope.$apply(function(){
                testScope.test="OK";
                alert("OK");
            })

ここの記述なんですが、ここの「$apply」がポイントです。

ここを単に

                testScope.test="OK";
                alert("OK");

こうすると画面の表示が変わりません。
関数「changeValue」はAngularJS外の関数なので、AngularJS側に通知してあげることが必要みたいです。

不明点

あと、{{test}}と書いている方がなぜか更新されないのは、なぜだかわかりません。
{{}}とng-modelで何か扱いが違うのかなぁ。。
そこは今後の課題です。

ざっとこんな感じです。
それでは!

アデュ~。

fine:derの購読はFacebookページが便利です。