AngularJS-Zugriffsbereich von außerhalb der js-Funktion

Ich versuche herauszufinden, ob es eine einfache Möglichkeit gibt, über eine externe Javascript-Funktion auf den internen Bereich eines Controllers zuzugreifen (für den Ziel-Controller völlig irrelevant).

Ich habe hier bei ein paar anderen Fragen gesehen, dass

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

würde den Bereich von einem DOM-Element abrufen, aber meine Versuche führen derzeit zu keinen richtigen Ergebnissen.

Hier ist die jsfiddle: http://jsfiddle.net/sXkjc/5/

Ich mache gerade einen Übergang von einfachem JS zu Angular durch. Der Hauptgrund, warum ich dies erreichen möchte, besteht darin, meinen ursprünglichen Bibliothekscode so intakt wie möglich zu halten. Ich muss nicht jede Funktion zur Steuerung hinzufügen.

Irgendwelche Ideen, wie ich das erreichen könnte? Kommentare zu der obigen Geige sind ebenfalls willkommen.

Sie müssen $ scope. $ Apply () verwenden, wenn Sie Änderungen an einem Bereichswert vornehmen möchten, die außerhalb der Kontrolle von anglejs liegen, wie z. B. einem jquery / javascript-Ereignishandler.

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

Demo: Fiddle

Es ist schon eine Weile her, dass ich diese Frage gestellt habe, aber angesichts der Ansichten, die dies immer noch zu bekommen scheint, ist hier eine andere Lösung, auf die ich in den letzten Monaten gestoßen bin:

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

Der obige Code erstellt im Grunde eine Funktion namens safeApply, die die $applyFunktion aufruft (wie in Aruns Antwort angegeben), wenn und nur Angular derzeit die Phase nicht durchläuft$digest . Wenn Angular jedoch gerade Dinge verdaut , führt es die Funktion einfach so aus, wie sie ist, da dies ausreicht, um Angular zu signalisieren, die Änderungen vorzunehmen.

Beim Versuch, die $applyFunktion zu verwenden, während AngularJs sich derzeit in der $digestPhase befindet , treten zahlreiche Fehler auf . Der safeApplyobige Code ist ein sicherer Wrapper, um solche Fehler zu vermeiden.

(Hinweis: Ich persönlich mag es, aus Bequemlichkeitsgründen safeApplyals Funktion von $rootScopeeinzusteigen)

Beispiel:

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

Demo: http://jsfiddle.net/sXkjc/227/

Ein anderer Weg, dies zu tun, ist:

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

wir können es nach dem Laden nennen

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

Es ist lange her, dass ich diese Frage gestellt habe, aber hier ist eine Antwort, für die keine Abfrage erforderlich ist:

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

Hier ist eine wiederverwendbare Lösung: 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';
    });

};

Sie können auch versuchen:

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

Die akzeptierte Antwort ist großartig. Ich wollte sehen, was mit dem Angular-Bereich im Kontext von passiert ng-repeat. Die Sache ist, Angular erstellt einen Unterbereich für jedes wiederholte Element. Wenn Sie eine im Original definierte Methode aufrufen $scope, behält diese ihren ursprünglichen Wert bei (aufgrund des Schließens von Javascript). Das thisbezieht sich jedoch auf den aufrufenden Bereich / das aufrufende Objekt. Das funktioniert gut aus, so lange , wie Sie sind klar, wann $scopeund thisgleich sind und wenn sie verschieden sind. hth

Hier ist eine Geige, die den Unterschied veranschaulicht: https://jsfiddle.net/creitzel/oxsxjcyc/

Ich bin Neuling, tut mir leid, wenn es eine schlechte Praxis ist. Basierend auf der gewählten Antwort habe ich diese Funktion ausgeführt:

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

Ich benutze es so:

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

Übrigens, entschuldige mein Englisch

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

Zugriff auf den Bereichswert

Angenommen, programRow.StationAuxiliaryTime ist ein Array von Objekten

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

Wir müssen Angular Js verwenden, die in die Funktion $ apply für Zugriffsbereichsvariablen oder Funktionen außerhalb der Controller-Funktion integriert sind.

Dies kann auf zwei Arten erfolgen:

| * | Methode 1: Verwenden der 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>

| * | Methode 2: Verwenden von init von ng-controller:

<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>