Simple question: How can I set a scope value in html, to be read by my controller?
var app = angular.module('app', []);
app.controller('MyController', function($scope) {
console.log($scope.myVar);
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
<div ng-controller="MyController" app-myVar="test">
{{myVar}}
</div>
</div>JSFiddle: http://jsfiddle.net/ncapito/YdQcX/
ng-init does not work when you are assigning variables inside loop. Use
{{myVariable=whatever;""}}
The trailing "" stops the Angular expression being evaluated to any text.
Then you can simply call {{myVariable}} to output your variable value.
I found this very useful when iterating multiple nested arrays and I wanted to keep my current iteration info in one variable instead of querying it multiple times.
{{}} only for outputting a single variable, not for assigning variables. I'd say stackoverflow.com/a/16799763/814160 is more correct (less JS code in the view).
ngInit can help to initialize variables.
<div ng-app='app'>
<div ng-controller="MyController" ng-init="myVar='test'">
{{myVar}}
</div>
</div>
Create a directive called myVar with
scope : { myVar: '@' }
and call it like this:
<div name="my_map" my-var="Richmond,VA">
Note in particular the camel case reference in the directive to the hyphenated tag name.
For more information see "Understanding Transclusion and Scopes" here:- http://docs.angularjs.org/guide/directive
Here's a Fiddle that shows how you can copy values from attributes to scope variables in various different ways within a directive.
var-nick='my' var-nick2='test'. Unless you can think of a way to implement it with directives I am just going to use ng-init
scope: {varNick: '@', varNick2: '@'}You can set values from html like this. I don't think there is a direct solution from angular yet.
<div style="visibility: hidden;">{{activeTitle='home'}}</div>
<div style="display: none"> however.You can use ng-init as shown below
<div class="TotalForm">
<label>B/W Print Total</label>
<div ng-init="{{BWCount=(oMachineAccounts|sumByKey:'BWCOUNT')}}">{{BWCount}}</div>
</div>
<div class="TotalForm">
<label>Color Print Total</label>
<div ng-init="{{ColorCount=(oMachineAccounts|sumByKey:'COLORCOUNT')}}">{{ColorCount}}</div>
</div>
and then use the local scope variable in other sections:
<div>Total: BW: {{BWCount}}</div>
<div>Total: COLOR: {{ColorCount}}</div>
$scope.$watch('myVar', function (newValue, oldValue) {
if (typeof (newValue) !== 'undefined') {
$scope.someothervar= newValue;
//or get some data
getData();
}
}, true);
Variable initializes after controller so you need to watch over it and when it't initialized the use it.
If you not in a loop, you can use ng-init else you can use
{{var=foo;""}}
the "" alows not display your var
I like the answer but I think it would be better that you create a global scope function that will allow you to set the scope variable needed.
So in the globalController create
$scope.setScopeVariable = function(variable, value){
$scope[variable] = value;
}
and then in your html file call it
{{setScopeVariable('myVar', 'whatever')}}
This will then allow you to use $scope.myVar in your respective controller
You can use the ng-value directive in a hidden field as below :-
<input type="hidden" ng-value="myScopeVar = someValue"/>
This will set the value of the scope variable (myScopeVar) to "someValue"
my-var="foo"when you call it. Note use of hyphen vs. camelCase. Note:foohere is evaluated, if you don't want that use '@' in the scope definition to access the value of the attribute.