I am calling factory before we call $on , is there way to assign $scope.attestorObj.riskAssessmentRoleAsgnKey to roleAsgnKy value that is global variable.New to angularJS any help will be appreciated.
So far tried code...
main.js
var roleAsgnKy;
$scope.filesGridOptions = attestorConfig.getAttestorHistoryFile();
$scope.filesGridOptions.dataSourceattestorFactory.getFilesHistoryDataSource(roleAsgnKy);
$scope.$on('addEditAttest',function(s,attestorObj){
$scope.attestorObj = attestorObj;
$scope.attestorObj.riskAssessmentRoleAsgnKey = roleAsgnKy;
});
Based on your comment about it wanting to be a global variable you have two options
1) Setup a service/factory to store and access that variable. That way you can set and get it from anywhere in your app https://docs.angularjs.org/guide/services
2) Make it a variable within $rootScope, which you can inject into any controller and access or change from anywhere as well https://docs.angularjs.org/api/ng/service/$rootScope
It's generally considered best practice to use a service for your style of issue, and you can wrap any logic needed around the variable there as well.
Related
I'm looking for a pattern in order to have globals constant in my application. But not with a controller or a factory. (so not with app.constant() too)
I just want to set a variable but I didn't find something good.
I wanted to set this var in my rootScoop but without success.
with something like
myApp.run(function($rootScoop){
$rootScoop.global = {};
});
When I use that code, an arror occurs for nothing (transtateFilterProvider). When I delete this code, the translateService works,
I MUST have access in all html view, I don't want to always use a controller (useless in this case), I just want to set a global variable in rootScoop.
Thank you.
You are getting an error because it is :
$rootScope
And not
$rootScoop
Anyway, correct way to do this is to add a constant module to your app like :
angular.module('yourapp', []).constant('Constants', {
foo: 'bar'
});
But you'll have to call Constants in controllers.
If you use $rootScope, remember you will need to call $root.global in templates.
It is clear that a method should be set to scope in order to be visible or available for the view (in html) or in a directive or in any other place where the method should be accessed, so that the method can be accessed through the $scope. My question is to know whether $scope is always necessary or a good practice to use when a method is defined. For instance, following are different method declarations:
Scenario 1. $scope.myMethod = function(){};
Scenario 2. var myMethod= function(){};
if 'myMethod' is only used in one controller, is it required to set it to the $scope? What are the advantages or why scenario 1 or 2 is good ?
What if someone has declared it as $scope.myMethod = function(){} ? is it not good or an unnecessary load to the $scope ? What can be the best practice?
NB: I don't need to make any poll here, please let me know any pros and cons
You mainly use the first scenario for things like binding click events. If you will only call the myMethod you don't really need to define it in scope.
For example following will need the first definition:
<button ng-click="myMethod()">My Button</button>
But following can use the second:
angular.module('myCtrl', [])
.controller('myController', function($scope) {
var myMethod = function (text) {alert(text)};
$scope.mySecondMethod = function () { myMethod('second'); }
$scope.myThirdMethod = function () { myMethod('third'); }
In second case you can use mySecondMethod and myThirdMethod in event binding.
Scenario 1. $scope.myMethod = function(){};
Scenario 2. var myMethod= function(){};
Scope is the glue between the controller and the view. If you really
need any variable and methods for the current view, then this should
be added to the scope variable. Please see the controller as property
if you don't want to add the methods to scope.
Scenario 1
If you declare a method using the scope, then this will be available/accessed from the view.
Scenario 2
If you really don't need this method to be accessed from the view, then you can remove this method from the scope.
You need $scope to define a method only if you are calling that function from your html code.
You can use this or some_names also instead of $scope.
$scope is just to mean that the function's (mehtod's) scope is inside that controller function and can be accessible from the html code that written inside the controller
If the function is calling inside the javascript (controller) only, then use normal definition
function myMethod(){}
OR
var myMethod = function(){}
Declaring a method or variable as $scope variable is only for accessing from DOM. If you are creating a new variable in $scope. It just adding that variable to the clousure of $scope as $scope: {first, seccond, third}
When ever you are calling a $scope function that just returns from the closure. There is not much load to the $scope I guess
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.
Both controllers and directives have reference to the scope, but not
to each other. This arrangement isolates the controller from the
directive as well as from the DOM. This is an important point since it
makes the controllers view agnostic, which greatly improves the
testing story of the applications.
From the documentation
I created a directive, I´m using in my template:
<data-input> </data-input>
In my directive (dataInput) I have the template (...data-input.html).
In that template the html-code says:
<input ng-change="dataChanged()" ... > ...
In the JavaScript it says:
scope.dataChanged= function(){ //change the data }
Works perfectly, but know I need to safe the changed data to a variable in my controller (that has a different scope of course).
The template, where I put the <data-input> </data-input> belongs to the final scope, I´m trying to reach.
I tried it via parameter, but it didnt work.
Thanks
Here are your options:
You can nest controllers if possible. This will create scope inheritance and you will be able to share variables of the parent.
You can use $rootscope from both the controllers to share data. Your dataChanged function can save anything to the $rootscope
You can use angular.element to get the scope of any element. angular.element('data-input').scope() returns it's cope.
This is not recommended. But there are circumstances in which people use global space to communicate between angular and non-angular code. But I don't think this is your case.
You can use Angular Watches to see changes is some variable, like this
eg:
$scope.$watch('age + name', function () {
//called when variables 'name' or 'age' changed
//Or you can use just 'age'
});
Does anyone know the best way to create and access a global constant is AngularJS?
I want to be able to doe something like:
app.constant('baseURL','http://www.baseurl.com');
and access it from any factory or controller.
Going for constant would be one of the better way as it has ability that we can access it inside the config level or in provider, so that we can take use of them to carry the config level settings.
For usage you could inject the same way as we do inject for service/factory or consider any dependency.
For making it more better you could use Object inside the your app.constant, so that it can carry multiple settings in it.
Constant
app.constant('configSettings', {
'baseUrl': 'http://www.baseurl.com',
'someElseSetting': 'settingValue'
//other setting will also be there.
});
Controller
app.controller('myCtrl', function($scope, configSettings){
//console.log(configSettings.baseUrl);
//you could use base URL here
});
In my angularJS app I use a directive. This directive needs to know the value of a variable in the application scope. Because the app scope variable needs to change when the directive updates it and the directive variable needs to change when the app scope variable changes, I used two way binding.
In my directive:
scope: {
"selectedObject": "=selectedobject"
}
In my html:
<dirname selectedobject="foo"/>
and in my controller:
$scope.foo = "somevalue";
//$scope.$apply(); Adding this, I get a '$digest already in progress' error
Now when I try to read the value of the selectedObject in my directive it starts with null instead of "somevalue". However, changes made in the directive scope propagate nicely to the application scope. How can I make sure it works the other way around too? That, if my controller changes the value of foo, this changes propagates to the directive scope?
Please read following article as I believe you fall into common pitfall and this article will help you understand your problem
http://nathanleclaire.com/blog/2014/04/19/5-angularjs-antipatterns-and-pitfalls/