Область доступа AngularJS от внешней функции js

Ответ 1

Вам нужно использовать $scope. $apply(), если вы хотите внести какие-либо изменения в значение области вне контроля angularjs как обработчик событий jquery/javascript.

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

Демо: Fiddle

Ответ 2

Прошло некоторое время с тех пор, как я опубликовал этот вопрос, но, учитывая взгляды, которые все еще возникают, вот еще одно решение, с которым я столкнулся в течение последних нескольких месяцев:

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

Вышеприведенный код в основном создает функцию с именем safeApply, которая вызывает функцию $apply (как указано в ответе Аруна), если и только Angular в настоящее время не проходит $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/

Ответ 3

мы можем вызвать его после загрузки

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

Ответ 4

Другой способ сделать это:

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

Ответ 5

Прошло много времени с тех пор, как я задал этот вопрос, но вот ответ, который не требует jquery:

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

Ответ 6

Здесь можно использовать многоразовое решение: 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';
    });

};

Ответ 7

Вы также можете попробовать:

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

Ответ 8

Принятый ответ велик. Я хотел посмотреть, что происходит с областью Angular в контексте ng-repeat. Дело в том, что Angular создаст под-область для каждого повторяющегося элемента. При вызове метода, определенного в исходном $scope, который сохраняет свое первоначальное значение (из-за закрытия javascript). Однако this ссылается на область/объект вызова. Это хорошо работает, если вам ясно, когда $scope и this совпадают, а когда они разные. HTH

Вот скрипка, которая иллюстрирует разницу: https://jsfiddle.net/creitzel/oxsxjcyc/

Ответ 9

Я новичок, извините, если это плохая практика. Основываясь на выбранном ответе, я сделал эту функцию:

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

Я использую его следующим образом:

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

Кстати, извините за мой английский

Ответ 10

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