외부 js 함수에서 AngularJS 액세스 범위

외부 js 함수에서 AngularJS 액세스 범위

외부 Javascript 기능을 통해 컨트롤러의 내부 스코프에 쉽게 접근할 수 있는 방법이 있는지 확인하려고 합니다(타겟 컨트롤러와는 전혀 무관함).

여기서 몇 가지 다른 질문들을 봤는데

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

DOM 요소에서 스코프를 취득하지만 현재 적절한 결과를 얻지 못하고 있습니다.

여기 jsfiddle이 있습니다.http://jsfiddle.net/sXkjc/5/

저는 지금 플레인 JS에서 앵귤러로 전환 중입니다.이를 실현하려는 주된 이유는 원래의 라이브러리 코드를 가능한 그대로 유지하고 각 기능을 컨트롤러에 추가할 필요가 없기 때문입니다.

어떻게 하면 이 일을 해낼 수 있을까?위의 바이올린에 대한 의견도 환영합니다.

$scope를 사용해야 합니다.jquery/script 이벤트핸들러와 같이 angularjs 제어 외부에서 스코프 값을 변경하는 경우 $script().

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

데모: 바이올린

이 질문을 게시한 지 꽤 되었지만, 여전히 이 질문을 받고 있는 것으로 보이는 관점을 고려하면, 지난 몇 달 동안 제가 발견한 또 다른 해결책이 다음과 같습니다.

$scope.safeApply = function( fn ) {
    var phase = this.$root.$$phase;
    if(phase == '$apply' || phase == '$digest') {
        if(fn) {
            fn();
        }
    } else {
        this.$apply(fn);
    }
};

위의 코드는 기본적으로 다음과 같은 함수를 만듭니다.safeApply를 호출합니다.$apply(Arun의 답변에 기재된 바와 같이) 현재 Angular만이 이 기능을 통과하지 않은 경우$digest반면 Angular가 현재 소화 중인 경우 변경 신호를 Angular에 전달하기에 충분하기 때문에 그대로 기능을 실행합니다.

를 사용하려고 하면, 많은 에러가 발생합니다.$applyAngularJs가 현재 에 있는 동안 기능합니다.$digest무대.safeApply위의 코드는 이러한 오류를 방지하기 위한 안전한 래퍼입니다.

(주의: 저는 개인적으로 기부하는 것을 좋아합니다.safeApply의 함수로서$rootScope편의상)

예:

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

데모: http://jsfiddle.net/sXkjc/227/

또 다른 방법은 다음과 같습니다.

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';
})

로딩 후 호출할 수 있습니다.

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");
    });
}

이 질문을 한 지 오래되었지만, 여기 jquery가 필요하지 않은 답변이 있습니다.

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

여기 재사용 가능한 솔루션이 있습니다.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';
    });

};

다음의 조작도 가능합니다.

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

인정된 답변은 훌륭합니다.Angular scope에 무슨 일이 일어나는지 보고 싶었습니다.ng-repeat문제는 Angular가 반복된 각 항목에 대해 하위 범위를 만든다는 것입니다.의 「」에되어 있는 .$scope(javascript closure로 인해) 원래 값을 유지합니다. 「」, 「」는this는 발신 범위/개체를 참조합니다. 는 잘언제인지 알 수 있으면 .$scope ★★★★★★★★★★★★★★★★★」this서로 다를 때 똑같다.

다음은 차이점을 보여주는 바이올린입니다.https://jsfiddle.net/creitzel/oxsxjcyc/

제가 초보라서 실례가 됐다면 죄송합니다.선택한 답변에 따라 다음 기능을 수행했습니다.

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

이렇게 사용하고 있습니다.

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

그나저나 내가 영어를 못해서 미안해.

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

액세스, 스코프 값의

Row 프로그램을 가정합니다.스테이션 보조시간은 객체의 배열입니다.

 $('.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);
        });

컨트롤러 기능 외부의 acsess scope 변수 또는 함수에 내장된 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>

저는 이렇게 해서CRUDManager classAngular 컨트롤러에서 초기화되었으며 나중에 컨트롤러 외부에서 정의된 jQuery 버튼 클릭 이벤트로 넘어갑니다.

각도 컨트롤러:

        // Note that I can even pass over the $scope to my CRUDManager's constructor.
        var crudManager = new CRUDManager($scope, contextData, opMode);

        crudManager.initialize()
            .then(() => {
                crudManager.dataBind();
                $scope.crudManager = crudManager;
                $scope.$apply();
            })
            .catch(error => {
                alert(error);
            });

jQuery Save 버튼에서 컨트롤러 외부의 이벤트를 클릭합니다.

    $(document).on("click", "#ElementWithNgControllerDefined #btnSave", function () {
        var ngScope = angular.element($("#ElementWithNgControllerDefined")).scope();
        var crudManager = ngScope.crudManager;
        crudManager.saveData()
            .then(finalData => {
               alert("Successfully saved!");
            })
            .catch(error => {
               alert("Failed to save.");
            });
    });

이는 jQuery 이벤트가 두 번 실행되지 않도록 컨트롤러 외부에 배치해야 할 때 특히 중요하며 유용합니다.

언급URL : https://stackoverflow.com/questions/15424910/angularjs-access-scope-from-outside-js-function