ขอบเขตการเข้าถึง AngularJS จากฟังก์ชัน js ภายนอก

ฉันกำลังพยายามดูว่ามีวิธีง่ายๆในการเข้าถึงขอบเขตภายในของคอนโทรลเลอร์หรือไม่ผ่านฟังก์ชั่นจาวาสคริปต์ภายนอก (ไม่เกี่ยวข้องกับตัวควบคุมเป้าหมายอย่างสมบูรณ์)

ฉันเคยเห็นคำถามอื่น ๆ สองสามข้อที่นี่

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

จะดึงขอบเขตจากองค์ประกอบ DOM แต่ความพยายามของฉันในขณะนี้ไม่ได้ผลลัพธ์ที่เหมาะสม

นี่คือ jsfiddle: http://jsfiddle.net/sXkjc/5/

ฉันกำลังจะเปลี่ยนจาก JS ธรรมดาไปเป็น Angular เหตุผลหลักที่ฉันพยายามทำให้สำเร็จคือการรักษารหัสห้องสมุดเดิมของฉันให้สมบูรณ์มากที่สุด ประหยัดความจำเป็นสำหรับฉันในการเพิ่มแต่ละฟังก์ชันลงในคอนโทรลเลอร์

มีความคิดเห็นเกี่ยวกับวิธีที่ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร ยินดีรับฟังความคิดเห็นเกี่ยวกับซอข้างต้นด้วย

คุณต้องใช้$ scope $ apply ()หากคุณต้องการเปลี่ยนแปลงค่าขอบเขตจากภายนอกการควบคุม angularjs เช่นตัวจัดการเหตุการณ์ jquery / javascript

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

การสาธิต: Fiddle

เป็นเวลานานแล้วที่ฉันโพสต์คำถามนี้ แต่เมื่อพิจารณาถึงมุมมองที่ดูเหมือนว่าจะได้รับนี่เป็นวิธีแก้ปัญหาอื่นที่ฉันพบในช่วงสองสามเดือนที่ผ่านมานี้:

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

รหัสข้างต้นโดยทั่วไปสร้างฟังก์ชั่นที่เรียกว่าsafeApplyที่ Calles $applyฟังก์ชั่น (ตามที่ระบุไว้ในคำตอบของอรุณ) ถ้าและเพียงเชิงมุมในขณะนี้จะไม่ผ่าน$digestเวที ในทางกลับกันหาก Angular กำลังย่อยสิ่งต่างๆอยู่มันก็จะเรียกใช้ฟังก์ชันตามที่เป็นอยู่เนื่องจากนั่นจะเพียงพอที่จะส่งสัญญาณให้ Angular ทำการเปลี่ยนแปลง

เกิดข้อผิดพลาดมากมายเมื่อพยายามใช้$applyฟังก์ชันนี้ในขณะที่ AngularJs อยู่ใน$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';
    })
}

คำตอบที่ได้รับการยอมรับนั้นยอดเยี่ยมมาก ฉันต้องการดูว่าเกิดอะไรขึ้นกับขอบเขตเชิงมุมในบริบทของng-repeat. สิ่งนี้คือ Angular จะสร้างขอบเขตย่อยสำหรับแต่ละรายการที่ทำซ้ำ เมื่อเรียกใช้เมธอดที่กำหนดไว้ในต้นฉบับ$scopeนั้นจะยังคงรักษาค่าเดิมไว้ (เนื่องจากการปิดจาวาสคริปต์) อย่างไรก็ตามthisหมายถึงขอบเขตการเรียก / วัตถุ นี้ทำงานออกมาได้ดีตราบใดที่คุณชัดเจนเมื่อ$scopeและthisที่เหมือนกันและเมื่อพวกเขาจะแตกต่างกัน HTH

นี่คือซอที่แสดงให้เห็นถึงความแตกต่าง: 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' />

เข้าถึงค่าขอบเขต

สมมติว่า 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);
        });

เราจำเป็นต้องใช้ Angular Js ที่สร้างขึ้นในฟังก์ชัน$ ใช้กับตัวแปรขอบเขต acsess หรือฟังก์ชันภายนอกฟังก์ชันคอนโทรลเลอร์

สามารถทำได้สองวิธี:

| * | วิธีที่ 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: การใช้ init ของ 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>