Angular Scope inside script

Question

Can we use the angular variables defined in scope inside script tag like below.

HTML CODE:

<div ng-controller="AngularCtrl">
 <script>
  alert($scope.user_name);
 </script>
</div>

JS CODE:

function AngularCtrl($scope){
 $scope.user_name = 'John';
}

I just get '$scope is not defined'. Can someone help me with what i am doing wrong here?

Supr · Accepted Answer · 2012-12-12 10:07:47Z

15

No you can't. $scope is only defined inside Angular, i.e. within your AngularCtrl-function. There are ways to get access to angular scopes from the outside, but that's usually bad practice and a sign that you're not using Angular correctly.

A more angulariffic way to do what you're trying is to make the alerting a part of the controller-logic:

function AngularCtrl($scope) {

    $scope.user_name = 'John';

    $scope.sayHi = function(){
        alert('Hi ' + $scope.user_name);
    }
}

You can then use a variety of angular-techniques (Demo Here) to call that sayHi() function. Some examples:

In response to a click

<div ng-click="sayHi()">Demo clickable - Please click me</div>

Automatically once when a given element is created/initialized

<div ng-init="sayHi()">Demo ng-init</div>

Directly from the controller when it is initialized

function AngularCtrl($scope) {

    $scope.user_name = 'John';

    $scope.sayHi = function(){
        alert('Hi ' + $scope.user_name);
    }

    // Call it
    $scope.sayHi();
}

Hopefully these examples are inspiring, but what you really should do depends on what you are really trying to accomplish.

answered Dec 12, 2012 at 10:07

Supr

19.1k3 gold badges33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Chubby Boy Over a year ago

Thanks Very much Supr! My problem here is I have a DOM that is not present when page is loaded. The DOM is loaded only on click of specific action. But the problem is the angular code inside that DOM is not compiled. so Is there a way to do $compile(jQuery("#DOM_ID")) when the DOM is loaded? Thanks again!

Supr Over a year ago

Yes, though you should probably create a directive for it. See the documentation and this example. Notice that a scope is applied to the return value of the compilation, effectively var compiled=$compile(element.contents()); compiled($scope);.

Supr Over a year ago

Note that there is already a built-in include directive in Angular which might do what you want. The example there responds to changes in a drop down, though you could easily adjust it to respond to a click event.

Andy Over a year ago

How can one access the element that calls that function on init? Is there a this?

Supr Over a year ago

@Andy, I don't know, and technically you shouldn't. Controllers shouldn't be dealing with the DOM/elements. If you need to interact with the element then that's a sign that you actually need to make a suitable directive. That will make it easier to reuse as well.

|

Collectives™ on Stack Overflow

Angular Scope inside script

1 Answer 1

In response to a click

Automatically once when a given element is created/initialized

Directly from the controller when it is initialized

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

In response to a click

Automatically once when a given element is created/initialized

Directly from the controller when it is initialized

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related