外部JS函数的AngularJS访问范围

我正在尝试查看是否存在通过外部javascript函数访问控制器内部范围的简单方法（与目标控制器完全无关）

我在其他几个问题上看到

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

会从DOM元素中检索范围，但是我的尝试目前未产生正确的结果。

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

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

关于如何实现这一目标的任何想法？也欢迎对上面的小提琴发表评论。

如果要从angularjs控件之外（例如jquery / javascript事件处理程序）对范围值进行任何更改，则需要使用$ scope。$ apply（）。

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

演示：小提琴

自从我发布这个问题以来已经有一段时间了，但是考虑到似乎仍然可以得到的意见，这是最近几个月来我想到的另一种解决方案：

$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阶段，则调用该函数（如Arun的回答所述）。另一方面，如果Angular 当前正在消化事物，它将按原样执行该函数，因为这足以向Angular发出信号以进行更改。

$applyAngularJs当前处于使用$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';
    })
}

公认的答案是伟大的。我想看看的背景下Angular范围发生了什么ng-repeat。事实是，Angular将为每个重复项创建一个子范围。调用在original上定义的方法时，该方法将$scope保留其原始值（由于javascript闭包）。但是，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);
        });

我们需要使用内置函数$ apply中的 Angular Js 来访问范围变量或控制器函数外部的函数。

这可以通过两种方式完成：

| * | 方法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：使用ng-controller的init：

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