Ruang lingkup akses AngularJS dari luar fungsi js

Saya mencoba melihat apakah ada cara sederhana untuk mengakses ruang lingkup internal pengontrol melalui fungsi javascript eksternal (sama sekali tidak relevan dengan pengontrol target)

Saya telah melihat beberapa pertanyaan lain di sini

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

akan mengambil lingkup dari elemen DOM, tetapi upaya saya saat ini tidak menghasilkan hasil yang tepat.

Inilah jsfiddle: http://jsfiddle.net/sXkjc/5/

Saat ini saya sedang melalui transisi dari JS polos ke Angular. Alasan utama saya berusaha mencapai ini adalah untuk menjaga kode perpustakaan asli saya sebanyak mungkin; menghemat kebutuhan bagi saya untuk menambahkan setiap fungsi ke controller.

Ada ide tentang bagaimana saya bisa mencapai ini? Komentar tentang biola di atas juga diterima.

Anda perlu menggunakan $ scope. $ Apply () jika Anda ingin membuat perubahan pada nilai scope dari luar kendali angularjs seperti event handler jquery / javascript.

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

Demo: Biola

Sudah lama sejak saya memposting pertanyaan ini, tetapi mengingat pandangan yang sepertinya masih ada, inilah solusi lain yang saya dapatkan selama beberapa bulan terakhir ini:

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

Kode di atas pada dasarnya menciptakan fungsi yang disebut safeApplyyang calles yang $applyfungsi (seperti yang dinyatakan dalam jawaban Arun) jika dan hanya sudut saat tidak akan melalui satu $digesttahap. Di sisi lain, jika Angular saat ini sedang mencerna hal-hal, itu hanya akan menjalankan fungsi seperti itu, karena itu akan cukup untuk memberi sinyal ke Angular untuk melakukan perubahan.

Banyak kesalahan terjadi ketika mencoba menggunakan $applyfungsi saat AngularJs sedang dalam $digesttahap. The safeApplykode di atas adalah pembungkus yang aman untuk mencegah kesalahan tersebut.

(catatan: Saya pribadi suka membuang safeApplysebagai fungsi $rootScopeuntuk keperluan kenyamanan)

Contoh:

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

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

Cara lain untuk melakukannya adalah:

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

kita bisa menyebutnya setelah dimuat

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

Sudah lama sejak saya mengajukan pertanyaan ini, tapi inilah jawaban yang tidak memerlukan jquery:

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

Inilah solusi yang dapat digunakan kembali: 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';
    });

};

Anda juga dapat mencoba:

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

Jawaban yang diterima sangat bagus. Saya ingin melihat apa yang terjadi pada ruang lingkup sudut dalam konteks ng-repeat. Masalahnya, Angular akan membuat sub-lingkup untuk setiap item yang diulang. Saat memanggil ke metode yang ditentukan pada aslinya $scope, yang mempertahankan nilai aslinya (karena penutupan javascript). Namun, thismerujuk pada ruang lingkup panggilan / objek. Ini bekerja dengan baik, selama Anda jelas kapan $scopedan thissama dan kapan mereka berbeda. hth

Berikut adalah biola yang menggambarkan perbedaannya: https://jsfiddle.net/creitzel/oxsxjcyc/

Saya pemula, sangat menyesal jika ini adalah praktik yang buruk. Berdasarkan jawaban yang dipilih, saya melakukan fungsi ini:

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

Saya menggunakannya dengan cara ini:

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

Omong-omong, maaf untuk bahasa Inggris saya

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

mengakses nilai ruang lingkup

menganggap bahwa programRow.StationAuxiliaryTime adalah array objek

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

Kita perlu menggunakan Angular Js built in function $ berlaku untuk variabel lingkup acsess atau fungsi di luar fungsi controller.

Ini dapat dilakukan dengan dua cara:

| * | Metode 1: Menggunakan 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>

| * | Metode 2: Menggunakan init of 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>