AngularJS access scope from outside js function

Question

I m trying to see if there s a simple way to access the internal scope of a controller through an external javascript function  completely irrelevant to the target controller   I ve seen on a couple of other questions here that  angular element   scope   scope     would retrieve the scope from a DOM element  but my attempts are currently yielding no proper results   Here s the jsfiddle  http   jsfiddle net sXkjc 5   I m currently going through a transition from plain JS to Angular  The main reason I m trying to achieve this is to keep my original library code intact as much as possible  saving the need for me to add each function to the controller   Any ideas on how I could go about achieving this  Comments on the above fiddle are also welcome

User · Answer

We need to use Angular Js built in function $apply to acsess scope variables or functions outside the controller function.

This can be done in two ways :

|*| Method 1 : Using 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>

|*| Method 2 : Using init of 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>

User · Answer

Here s a reusable solution  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

User · Answer

we can call it after loaded  http   jsfiddle net gentletech s3qtv 3    lt div id  wrap  ng-controller  Ctrl  gt        message   lt br gt        info        lt  div gt       lt a  onClick  hi    gt click me  lt  a gt       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

User · Answer

You need to use  scope  apply   if you want to make any changes to a scope value from outside the control of angularjs like a jquery javascript event handler   function change         alert  a        var scope   angular element     outer    scope        scope  apply function            scope msg    Superhero              Demo  Fiddle

User · Answer

The accepted answer is great   I wanted to look at what happens to the Angular scope in the context of ng-repeat    The thing is  Angular will create a sub-scope for each repeated item   When calling into a method defined on the original  scope  that retains its original value  due to javascript closure    However  the this refers the calling scope object    This works out well  so long as you re clear on when  scope and this are the same and when they are different   hth  Here is a fiddle that illustrates the difference  https   jsfiddle net creitzel oxsxjcyc

User · Answer

Another way to do that is   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

User · Answer

I m newbie  so sorry if is a bad practice  Based on the chosen answer  I did this function   function x apply selector  variable  value        var scope   angular element    selector    scope        scope  apply function            scope variable    value              I m using it this way   x apply   fileuploader    thereisfiles   true     By the way  sorry for my english

User · Answer

lt input type  text  class  form-control timepicker2  ng-model  programRow StationAuxiliaryTime ST88    gt    accessing scope value  assume that programRow StationAuxiliaryTime is an array of object        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    gt  0                    val   scopeValues programRow StationWaterTime stationNumber                             else                   val   scopeValues programRow StationAuxiliaryTime stationNumber                             currentElement timepicker  setTime   val

User · Answer

This is how I did for my CRUDManager class initialized in Angular controller  which later passed over to jQuery button-click event defined outside the controller  In Angular Controller             Note that I can even pass over the  scope to my CRUDManager s constructor          var crudManager   new CRUDManager  scope  contextData  opMode            crudManager initialize                then      gt                    crudManager dataBind                     scope crudManager   crudManager                   scope  apply                                catch error   gt                    alert error                    In jQuery Save button click event outside the controller        document  on  quot click quot    quot  ElementWithNgControllerDefined  btnSave quot   function              var ngScope   angular element    quot  ElementWithNgControllerDefined quot    scope            var crudManager   ngScope crudManager          crudManager saveData                then finalData   gt                   alert  quot Successfully saved  quot                                catch error   gt                   alert  quot Failed to save  quot                             This is particularly important and useful when your jQuery events need to be placed OUTSIDE OF CONTROLLER in order to prevent it from firing twice

User · Answer

You can also try   function change         var scope   angular element  document getElementById  outer     scope        scope  apply function            scope msg    Superhero

User · Answer

It s been a while since I posted this question  but considering the views this still seems to get  here s another solution I ve come upon during these last few months    scope safeApply   function  fn         var phase   this  root   phase      if phase      apply     phase      digest             if fn                fn                    else           this  apply fn              The above code basically creates a function called safeApply that calles the  apply function  as stated in Arun s answer  if and only Angular currently isn t going through the  digest stage  On the other hand  if Angular is currently digesting things  it will just execute the function as it is  since that will be enough to signal to Angular to make the changes    Numerous errors occur when trying to use the  apply function while AngularJs is currently in its  digest stage  The safeApply code above is a safe wrapper to prevent such errors     note  I personally like to chuck in safeApply as a function of  rootScope for convenience purposes   Example   function change         alert  a        var scope   angular element     outer    scope        scope safeApply function            scope msg    Superhero              Demo  http   jsfiddle net sXkjc 227

User · Answer

It s been a long time since I asked this question  but here s an answer that doesn t require jquery   function change         var scope   angular element document querySelector   outside    scope        scope  apply function            scope msg    Superhero

[angularjs] AngularJS access scope from outside js function

Examples related to angularjs

Examples related to angularjs-scope