Js işlevinin dışındaki AngularJS erişim kapsamı

Bir denetleyicinin dahili kapsamına harici bir javascript işlevi aracılığıyla erişmenin basit bir yolu olup olmadığını görmeye çalışıyorum (hedef denetleyiciyle tamamen ilgisiz)

Burada birkaç başka soruda gördüm ki

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

kapsamı bir DOM öğesinden alır, ancak girişimlerim şu anda uygun sonuç vermiyor.

İşte jsfiddle: http://jsfiddle.net/sXkjc/5/

Şu anda düz JS'den Angular'a geçiş yapıyorum. Bunu başarmaya çalışmamın ana nedeni, orijinal kitaplık kodumu olabildiğince sağlam tutmaktır; her işlevi denetleyiciye ekleme ihtiyacını ortadan kaldırıyor.

Bunu başarmak için nasıl gidebileceğime dair bir fikriniz var mı? Yukarıdaki kemanla ilgili yorumlar da memnuniyetle karşılanmaktadır.

$ Kapsam kullanmanız gerekiyor . $ Apply ()Jquery / javascript olay işleyicisi gibi angularjs'nin denetimi dışındaki bir kapsam değerinde değişiklik yapmak istiyorsanız, .

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

Demo: Keman

Bu soruyu göndereli epey zaman oldu, ancak bunun hala elde ettiği görüşleri göz önünde bulundurarak, işte son birkaç aydır karşılaştığım başka bir çözüm:

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

Yukarıdaki kod temelde adında bir işlev oluşturur safeApplycalles o $apply(Arun yanıtında belirtildiği gibi) işlevi yalnızca Eğik anda eğer gerçekleşmiyorsa$digest sahnede. Öte yandan, Angular şu anda bir şeyleri sindiriyorsa , işlevi olduğu gibi yerine getirecektir, çünkü bu, değişiklikleri yapmak için Angular'a sinyal göndermek için yeterli olacaktır.

$applyAngularJs şu anda $digestaşamasındayken işlevi kullanmaya çalışırken çok sayıda hata oluşur . Yukarıdaki safeApplykod, bu tür hataları önlemek için güvenli bir paketleyicidir.

(not: Ben şahsen kolaylık sağlamak için safeApplybir işlevi olarak girmeyi seviyorum $rootScope)

Misal:

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

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

Bunu yapmanın başka bir yolu şudur:

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

yüklendikten sonra arayabiliriz

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

Bu soruyu sormayalı uzun zaman oldu, ama işte jquery gerektirmeyen bir cevap:

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

İşte yeniden kullanılabilir bir çözüm: 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';
    });

};

Şunları da deneyebilirsiniz:

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

Kabul edilen cevap harika. Açısal kapsama bağlamında ne olduğuna bakmak istedim ng-repeat. Mesele şu ki, Angular tekrarlanan her öğe için bir alt kapsam oluşturacak. Orijinalde tanımlanan bir yöntemi çağırırken $scope, orijinal değerini korur (javascript kapanması nedeniyle). Ancak, thisçağıran kapsamı / nesneyi ifade eder. Bu çok uzun zaman açık olduğunuz gibi iyi çalışıyor $scopeve thisaynıdır ve bunlar farklı olduğunda. hth

İşte farkı gösteren bir keman: https://jsfiddle.net/creitzel/oxsxjcyc/

Ben acemiyim, çok üzgünüm eğer kötü bir pratikse. Seçilen cevaba göre şu işlevi yaptım:

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

Bunu şu şekilde kullanıyorum:

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

Bu arada, ingilizcem için özür dilerim

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

kapsam değerine erişim

programRow.StationAuxiliaryTime'ın bir nesne dizisi olduğunu varsayın

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

$ Apply işlevinde yerleşik Angular Js'yi denetleyici işlevi dışındaki erişim kapsam değişkenlerine veya işlevlerine kullanmamız gerekir .

Bu iki şekilde yapılabilir :

| * | Yöntem 1: Kimliği Kullanma:

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

| * | Yöntem 2: ng-denetleyicinin başlangıcını kullanma:

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