I am wondering how I can add a value to the scope from a function outside the controller. I have a series of functions in my controller file, which I would like to keep it separately outside a controller method, so that it can be accessed by different controllers. When the last function gets the value, I want to add it to the scope. Can anybody give me some input into this issue. Thanks
Angular $scope is not supposed to be accessed from outside. Use service/factory/provider to share data between controllers.
Say, define a factory with get/set functions. set the value in some controller and get it from somewhere else. $scope is not supposed to be passed around.
Related
I have multiple directives and in every directive I call a function which is defined on the $rootScope. I want to find a way to tell from which directive the function was called without sending the directive name.
You can try to extract the caller function from within the $rootScope function you are using.
e.g.
arguments.callee.caller.toString();
There are many example to get such data or stack-traces, just try to look for that.
If the right way to share data between controllers are using factory/service, what is the purpose of the $rootScope?
$rootScope exists, but it can be used for evil
Scopes in Angular form a hierarchy, prototypally inheriting from a root scope at the top of the tree. Usually this can be ignored, since most views have a controller, and therefore a scope, of their own.
Occasionally there are pieces of data that you want to make global to the whole app. For these, you can inject $rootScope and set values on it like any other scope. Since the scopes inherit from the root scope, these values will be available to the expressions attached to directives like ng-show just like values on your local $scope.
Of course, global state sucks and you should use $rootScope sparingly, like you would (hopefully) use with global variables in any language. In particular, don't use it for code, only data. If you're tempted to put a function on $rootScope, it's almost always better to put it in a service that can be injected where it's needed, and more easily tested.
Conversely, don't create a service whose only purpose in life is to store and return bits of data.
-- AngularJS FAQ
As per my understanding.
you can use $rootScope in multiple places .
global settings defined in factory and then in view you can update as per your condition. f.x layout manipulation
you can assigned $state on run.
you can handle error ($rootScope.$on(...)
I hope this will help.
Thanks
I have been start learning AngularJS 1.4.7 and I can't understand completely the $scope variables.
Is this a variable inside a Angular controller "like" public variables inside a PHP class?
For example:
I have 2 functions function1(), function2() in HomeCtrl.js and a $scope.img = null; variable, and 2 ng-click event in template file to call these functions.
On ng-cick event i call the function1 and set the value of $scope.url to somethig
Thereafter i call the function2 and console.log($.scope.url) it retutn null. Null is the initialized value of this varaiable.
I'v just set the value of $scope.url in function1 and inside function2 value of variabel is null, why?
I have no idea why happening this.
scope is instance of controller.
When you declare a controller , scope will be avaiable there.
You can access scope through out that controller.
That's why when you change on place in a controller , change will be reflect everywhere in that scope.
Do you literally call $.scope.url? Then that's a problem, it should be $scope.url, no dot between "$" and "scope".
Scope variables have nothing to do with variables accessibility concept (public/private/protected/etc).
They are those "magic" variables, which can be placed inside templates using expressions, which allows data-binding in Angular, i.e., your html with that "magic" scope variables, gets automatically updated by angular, when you just change their values inside your controller, like in that callback function for ng-click. (Actually it's not that easy, here we come to $watch and $digest, but if you are not writing your custom directives, and not mixing, for example, jQuery code with Angular code, you may not think about it for now).
Two-side data-binding, automatic html updates - that's the main point of $scope and $scope variables.
Scope is not and instance of a controller, they are different Angular entities.
I am new to learning Angularjs and kinda confused. I want to ask that if the same controller is binded at different pages does those pages share the same scope variable or they have their own isolated scope? Remember both of the pages are using the same controller.
From the documentation:
When a Controller is attached to the DOM via the ng-controller
directive, Angular will instantiate a new Controller object, using the
specified Controller's constructor function. A new child scope will be
created and made available as an injectable parameter to the
Controller's constructor function as $scope.
So 1) it is not the same controller, those are two instances of the same constructor functions (a.k.a class) and 2) new scope is created as a child of a scope controller is attached to.
Another point from documentation:
Scopes are arranged in hierarchical structure which mimic the DOM
structure of the application.
So two separate DOM elements cannot have same scope - it would heavily affect Angular structure. Each controller can only get an access to the scope of element it is attached to.
If you suffering because of one scope being updated when another one is changed, please post your code as you can have "surprise closure" in your controller definition.
I want to ask that if the same controller is binded at different pages does those pages share the same scope variable or they have their own isolated scope? Remember both of the pages are using the same controller.
Yes, I echo others thoughts here. if you are using same controller for any number of pages the scope will remains same for each page. Unless one does not change the scope, the value remains as it was during the initialization.
eg. Your controller is as below
myApp.controller('FirstCtrl', function( $scope){
$scope.myVar = 'this is my scope';
});
and if you are using same controller for two pages then for page one and page two will have same value of myVar. Hence below html in one page one
<div ng-model="myVar"></div>
and below html in page two
<span ng-model="myVar"></span>
will display as
<div ng-model="myVar">this is my scope</div>
and
<span ng-model="myVar">this is my scope</span>
respectively.
Given this, I would like to add that it is also possible of sharing $scope between different controllers using $emit, $broadcast and $on.
Read more about this at http://www.dotnet-tricks.com/Tutorial/angularjs/HM0L291214-Understanding-$emit,-$broadcast-and-$on-in-AngularJS.html
Hope this helps.
According to the Angular docs:
Scope is the glue between application controller and the view. During the template linking phase the directives set up $watch expressions on the scope. The $watch allows the directives to be notified of property changes, which allows the directive to render the updated value to the DOM.
Now my Question is : if my function is not connected to the view, should we use $scope or not?
I assume that you mean if you should do $scope.functionName = function(), even if the function isn't connected to the view.
No you shouldn't, why would you expose a function to the view, which isn't needed to the view? Also you get a better overview which functions is internally when only using function funcName().
You shouldn't use the $scope to declare every function you are using, especially if it's not connected to the view.
However, there are some cases you need to use the $scope in a function not connected to view, for example if you want to emit/receive/broadcast a message on the scope tree or access something on a parent scope (although it's not necessarly a good practice).