Inside my view I have declared a variable like this:
<span>{{myVariable = 25}}</span>
Now how do I obtain the value of myVariable in the controller?
alert($scope.myVariable) is undefined.
I know this is quirky but just want to know how to declare variables in view and
get the same in controller.
Any way I could do the same using ng-init ?
For the described scenario you could use ngInit
However it would make more sense to initialize your variable in the controller if it is where you need it. This is is how you could do it from the view using ngInit:
<span ng-init="myVariable = 25">{{myVariable }}</span>
https://docs.angularjs.org/api/ng/directive/ngInit
You cant get the value from the controller in onload. But you can get like this (in onDemand)
$scope.click function() {
alert($scope.myVariable)
}
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.
I have this function showPopupSelectTopic(subject) to call in my ng-repeat html code. But it does not work at all.
<div style="width:100%;" ng-controller="manageStudyCtrl">
<div class="div-subject" ng-repeat="subject in dataSubject" ng-click="showPopupSelectTopic(subject)">
<div class="round-button-subject-2">
<div class="subject-name-2 subject-eng" style="color:{{subject.subject_code.colour_code}}">
{{subject.subject_code.short_name}}
<div>{{subject.avg_overall_coverage | number : 0}}%</div>
</div>
<circular-progress
value = "subject.avg_overall_coverage"
max="100"
orientation="1"
radius="36"
stroke="8"
base-color="#b9b9b9"
progress-color="{{subject.subject_code.colour_code}}"
iterations="100"
animation="easeInOutCubic"
></circular-progress>
</div>
</div>
</div>
I want to call my showPopupSelectTopic(subject)in my controller so that I can make popup and manipulate the data.
I have done outside from ng-repeatand its working perfectly. However if I used in ng-repeat then it would not execute as expected. How to solve this issue?
My controller:
angular.module('manageStudy', [])
.controller('manageStudyCtrl', function($scope,){
$scope.showPopupSelectTopic = function(subject) {
alert(subject.chapter_id);
};
});
That's not possible due to every ng-repeat creating its own child scope. That being said, ever functio invocation will lead the child to copy some variables into its own scope. You'd have to use their parentscope or refere to the origin $scope of your controller.
ng-click="$parent.showPopupSelectTopic(subject)"
This should solve the problem. However, it's kinda dirty. A better solution would be to return your parents scope and use it in every child scope just like that. So declare a function inside of your controller (e.g. $scope.getScope) and let it simply return its $scope. Afterwards you'll be able to access it properly.
$scope.getScope = function() {
return $scope;
}
ng-click = "getScope().showPopupSelectTopic(subject)"
ng-repeat works only with an iterate able object, like array or collection. Before you open the div where you intent to repeat, the iterate able object must be in ready in the scope. Try using ngInit instead of ngClick to initialize the array before attempting to ngRepeat
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'
});
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.
I have a dropdown that is defined using angular's ng-options syntax. I also have ng-model on the element and I am trying to get the selected model to output to the console. I have read a lot of different SO questions, but I just keep getting undefined. When I have the model defined in a service on rootScope then I get null.
Not sure what is going on, but it seems like the object isn't getting into the ng-model.
In the view:
<select ng-model="selected" ng-change="updateCategory()"
ng-options="conference.Name for conference in Adminconferences
| orderBy:['Name'] "></select>
In the controller:
$scope.updateCategory = function () {
console.log($scope.selected);
}
Update: I realized that maybe if i include what i am trying to do then maybe I can get better responses and have a better question.
This dropdown list is located in the header of my site. I want the user to be able to select which conference they want to manage. Based on that, I want all of the data in the site to be based on the conference's Id. I am not sure what the angular way of doing this is. I think i need to use rootScope and just reference it whenever i need the id for data calls. Is this acceptable?
I think you need to initialize $scope.selected in the controller before you use it inside function.
Initialize it like this:
$scope.selected = 0;
and then use it inside the function.