Phạm vi truy cập AngularJS từ bên ngoài chức năng js

Tôi đang cố gắng xem liệu có một cách đơn giản để truy cập phạm vi bên trong của bộ điều khiển thông qua chức năng javascript bên ngoài (hoàn toàn không liên quan đến bộ điều khiển đích)

Tôi đã thấy một vài câu hỏi khác ở đây rằng

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

sẽ lấy lại phạm vi từ một phần tử DOM, nhưng những nỗ lực của tôi hiện không mang lại kết quả chính xác nào.

Đây là jsfiddle: http://jsfiddle.net/sXkjc/5/

Tôi hiện đang trải qua quá trình chuyển đổi từ JS đơn giản sang Angular. Lý do chính tôi đang cố gắng để đạt được điều này là để giữ cho mã thư viện ban đầu của tôi nguyên vẹn nhất có thể; tiết kiệm nhu cầu cho tôi để thêm từng chức năng vào bộ điều khiển.

Có ý tưởng nào về cách tôi có thể đạt được điều này không? Nhận xét về các fiddle trên cũng được chào đón.

Bạn cần sử dụng $ scope. $ Apply () nếu bạn muốn thực hiện bất kỳ thay đổi nào đối với giá trị phạm vi từ bên ngoài sự kiểm soát của angularjs như trình xử lý sự kiện jquery / javascript.

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

Demo: Fiddle

Đã được một thời gian kể từ khi tôi đăng câu hỏi này, nhưng xem xét các quan điểm mà dường như vẫn nhận được, đây là một giải pháp khác mà tôi đã đưa ra trong vài tháng qua:

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

Đoạn mã trên về cơ bản tạo ra một chức năng gọi safeApplylà Calles các $applychức năng (như đã nêu trong câu trả lời của Arun) khi và chỉ kiễu góc hiện không được trải qua các $digestgiai đoạn. Mặt khác, nếu Angular hiện đang tiêu hóa mọi thứ, nó sẽ chỉ thực thi chức năng như vậy, vì điều đó sẽ đủ để báo hiệu cho Angular thực hiện các thay đổi.

Vô số lỗi xảy ra khi cố gắng sử dụng $applychức năng trong khi AngularJs hiện đang ở $digestgiai đoạn của nó . Các safeApplymã trên là một wrapper an toàn để ngăn chặn các lỗi như vậy.

(lưu ý: Cá nhân tôi thích tặc lưỡi safeApplynhư một chức năng $rootScopecho mục đích thuận tiện)

Thí dụ:

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

Bản trình diễn: http://jsfiddle.net/sXkjc/227/

Một cách khác để làm điều đó là:

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

chúng ta có thể gọi nó sau khi tải

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

Đã lâu rồi tôi mới hỏi câu hỏi này, nhưng đây là một câu trả lời không đòi hỏi phải có sự châm biếm:

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

Đây là một giải pháp có thể sử dụng lại: 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';
    });

};

Bạn cũng có thể thử:

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

Câu trả lời được chấp nhận là rất tốt. Tôi muốn xem xét những gì xảy ra với phạm vi Angular trong bối cảnh ng-repeat. Vấn đề là, Angular sẽ tạo ra một phạm vi phụ cho mỗi mục lặp lại. Khi gọi vào một phương thức được xác định trên bản gốc $scope, nó vẫn giữ nguyên giá trị ban đầu của nó (do đóng javascript). Tuy nhiên, thisđề cập đến phạm vi / đối tượng gọi. Điều này hoạt động tốt, miễn là bạn rõ ràng khi nào $scopevà thisgiống nhau và khi chúng khác nhau. thứ

Đây là một câu đố minh họa cho sự khác biệt: https://jsfiddle.net/creitzel/oxsxjcyc/

Tôi là người mới, rất xin lỗi nếu là một thực hành xấu. Dựa trên câu trả lời đã chọn, tôi đã thực hiện chức năng này:

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

Tôi đang sử dụng nó theo cách này:

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

Nhân tiện, xin lỗi vì tiếng anh của tôi

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

truy cập giá trị phạm vi

giả sử rằng chương trìnhRow.StationAuxadderTime là một mảng của đối tượng

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

Chúng ta cần sử dụng Angular Js được xây dựng trong hàm $ áp dụng cho các biến phạm vi hoặc các hàm phạm vi bên ngoài hàm điều khiển.

Điều này có thể được thực hiện theo hai cách :

| * | Phương pháp 1: Sử dụng 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>

| * | Cách 2: Sử dụng init của 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>