在标记中设置角度范围变量

简单的问题: 如何在 html 中设置范围值，以供控制器读取？

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>

http://jsfiddle.net/ncapito/YdQcX/

199691 次浏览
小开

ngInit can help to initialize variables.

<div ng-app='app'>
<div ng-controller="MyController" ng-init="myVar='test'">
\{\{myVar}}
</div>
</div>

jsfiddle example

小开

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.

小开

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>
小开
最佳答案

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.

小开

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>
小开

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

小开 
$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

小开

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"


提交答案