AngularJS从js函数外部访问范围

Question

我试图通过外部javascript函数(与目标控制器完全无关)来查看是否有一种简单的方法来访问控制器的内部范围

我在这里看到了其他几个问题

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

将从DOM元素中检索范围,但我的尝试目前没有产生适当的结果.

这是jsfiddle:http://jsfiddle.net/sXkjc/5/

我目前正在经历从普通JS到Angular的过渡.我试图实现这一目标的主要原因是尽可能保持原始库代码的完整性; 无需我将每个功能添加到控制器.

关于如何实现这一目标的任何想法？对上述小提琴的评论也很受欢迎.

Answer 1

如果要从angularjs控件之外对范围值进行任何更改(如jquery/javascript事件处理程序),则需要使用$ scope.$ apply().

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

演示:小提琴

Answer 2

自从我发布这个问题已经有一段时间了,但考虑到这似乎仍然存在的观点,这是我在过去几个月中遇到的另一个解决方案:

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

上面的代码基本上创建了一个调用的函数safeApply是卡列斯的$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/

Answer 3

另一种方法是:

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

Answer 4

我们可以在加载后调用它

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

Answer 5

我问这个问题已经很久了,但是这里的答案不需要jquery:

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