web-dev-qa-db-ja.com

外部js関数からAngularJSアクセス範囲

外部のJavaScript関数を使ってコントローラの内部スコープにアクセスする簡単な方法があるかどうかを確認しようとしています（ターゲットコントローラとはまったく関係ありません）。

私はここで他のいくつかの質問で見たことがある

angular.element("#scope").scope();

dOM要素からスコープを取得しますが、私の試みは現在、適切な結果をもたらしていません。

これがjsfiddleです。 http://jsfiddle.net/sXkjc/5/

私は現在、プレーンなJSからAngularへの移行を進めています。私がこれを達成しようとしている主な理由は、私のオリジナルのライブラリコードをできるだけ無傷に保つことです。コントローラに各機能を追加する必要がなくなりました。

私はこれを達成するためにどのように行くことができるかについてのアイデアはありますか？上記のフィドルについてのコメントも大歓迎です。

angularjsangularjs-scope
129
dk123

Jquery/javascriptイベントハンドラのようにangularjsの制御外からスコープ値を変更したい場合は、 $ scope。$ apply（） を使用する必要があります。

function change() {
    alert("a");
    var scope = angular.element($("#outer")).scope();
    scope.$apply(function(){
        scope.msg = 'Superhero';
    })
}

デモ： フィドル

221
Arun P Johny

それをするためのもう一つの方法は:

var extScope;
var app = angular.module('myApp', []);
app.controller('myController',function($scope, $http){
    extScope = $scope;
})
//below you do what you want to do with $scope as extScope
extScope.$apply(function(){
    extScope.test = 'Hello world';
})
15
Charleston

ロードした後に呼び出すことができます

http://jsfiddle.net/gentletech/s3qtv/3/

<div id="wrap" ng-controller="Ctrl">
    {{message}}<br>
    {{info}}
    </div>
    <a  onClick="hi()">click me </a>

    function Ctrl($scope) {
        $scope.message = "hi robi";
        $scope.updateMessage = function(_s){
            $scope.message = _s;    
        };
    }

function hi(){
    var scope = angular.element(document.getElementById("wrap")).scope();
        scope.$apply(function() {
        scope.info = "nami";
        scope.updateMessage("i am new fans like nami");
    });
}
13
fallwind

私がこの質問をしてから長い時間が経ちました、しかしここにjqueryを必要としない答えがあります：

function change() {
    var scope = angular.element(document.querySelector('#outside')).scope();
    scope.$apply(function(){
        scope.msg = 'Superhero';
    })
}
8
dk123

これが再利用可能な解決策です： http://jsfiddle.net/flobar/r28b0gmq/

function accessScope(node, func) {
    var scope = angular.element(document.querySelector(node)).scope();
    scope.$apply(func);
}

window.onload = function () {

    accessScope('#outer', function (scope) {
        // change any property inside the scope
        scope.name = 'John';
        scope.sname = 'Doe';
        scope.msg = 'Superhero';
    });

};
3
flobar

あなたも試すことができます：

function change() {
    var scope = angular.element( document.getElementById('outer') ).scope();
    scope.$apply(function(){
        scope.msg = 'Superhero';
    })
}
2
harish sharma

私は初心者なので、悪い方法であれば申し訳ありません。選ばれた答えに基づいて、私はこの機能をしました：

function x_apply(selector, variable, value) {
    var scope = angular.element( $(selector) ).scope();
    scope.$apply(function(){
        scope[variable] = value;
    });
}

私はこれを使っています：

x_apply('#fileuploader', 'thereisfiles', true);

さて、私の英語でごめんね

1
MrQwerty

受け入れられた答えは素晴らしいです。私はAngularスコープに何が起こるのかをng-repeatの文脈で見たいと思いました。つまり、Angularは、繰り返される各項目に対してサブスコープを作成します。元の$scopeで定義されているメソッドを呼び出すと、元の値が保持されます（JavaScriptが閉じられたため）。ただし、thisは呼び出し側のスコープ/オブジェクトを表します。 $scopeとthisが同じで、いつ違うかが明確である限り、これはうまくいきます。 hth

これが違いを説明するフィドルです。 https://jsfiddle.net/creitzel/oxsxjcyc/

1
Charlie

スコープ関数やコントローラ関数の外側の関数にアクセスするには、Angular Js組み込み関数$ applyを使用する必要があります。

これには2つの方法があります。

| * |方法1：IDを使用する

<div id="nameNgsDivUid" ng-app="">
    <a onclick="actNgsFnc()"> Activate Angular Scope</a><br><br>
    {{ nameNgsVar }}
</div>

<script type="text/javascript">

    var nameNgsDivVar = document.getElementById('nameNgsDivUid')

    function actNgsFnc()
    {
        var scopeNgsVar = angular.element(nameNgsDivVar).scope();
        scopeNgsVar.$apply(function()
        {
            scopeNgsVar.nameNgsVar = "Tst Txt";
        })
    }

</script>

| * |方法2：ng-controllerのinitを使用する

<div ng-app="nameNgsApp" ng-controller="nameNgsCtl">
    <a onclick="actNgsFnc()"> Activate Angular Scope</a><br><br>
    {{ nameNgsVar }}
</div>

<script type="text/javascript">

    var scopeNgsVar;
    var nameNgsAppVar=angular.module("nameNgsApp",[])
    nameNgsAppVar.controller("nameNgsCtl",function($scope)
    {
        scopeNgsVar=$scope;
    })

    function actNgsFnc()
    {
        scopeNgsVar.$apply(function()
        {
            scopeNgsVar.nameNgsVar = "Tst Txt";
        })
    }

</script>
0
Sujay U N
<input type="text" class="form-control timepicker2" ng-model='programRow.StationAuxiliaryTime.ST88' />

スコープ値へのアクセス

programRow.StationAuxiliaryTimeがオブジェクトの配列であると仮定します

 $('.timepicker2').on('click', function () 
    {
            var currentElement = $(this);

            var scopeValues = angular.element(currentElement).scope();
            var model = currentElement.attr('ng-model');
            var stationNumber = model.split('.')[2];
            var val = '';
            if (model.indexOf("StationWaterTime") > 0) {
                val = scopeValues.programRow.StationWaterTime[stationNumber];
            }
            else {
                val = scopeValues.programRow.StationAuxiliaryTime[stationNumber];
            }
            currentElement.timepicker('setTime', val);
        });
0
Sreeraj