Définir une variable de portée angulaire dans le balisage

Question

Une question simple : Comment puis-je définir une valeur de portée en html, qui sera lue par mon contrôleur ?

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/

Answer 1

ng-init ne fonctionne pas lorsque vous assignez des variables à l'intérieur d'une boucle. Utilisez {{myVariable=whatever;""}}

La queue "" arrête l'évaluation de l'expression Angular en un texte quelconque.

Vous pouvez alors simplement appeler {{myVariable}} pour sortir la valeur de votre variable.

J'ai trouvé cela très utile lors de l'itération de plusieurs tableaux imbriqués et je voulais garder mes informations d'itération actuelles dans une variable au lieu de les interroger plusieurs fois.

Answer 2

ngInit peut aider à initialiser les variables.

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

Exemple de jsfiddle

Answer 3

Créez une directive appelée myVar avec

scope : { myVar: '@' }

et l'appeler comme ça :

<div name="my_map" my-var="Richmond,VA">

Notez en particulier la référence en majuscules dans la directive au nom de la balise avec trait d'union.

Pour plus d'informations, voir "Comprendre la transclusion et les champs d'application" ici :-. http://docs.angularjs.org/guide/directive

Voici un violon qui montre comment vous pouvez copier les valeurs des attributs vers les variables de portée de différentes manières dans une directive.

Answer 4

Vous pouvez définir des valeurs à partir du html comme ceci. Je ne pense pas qu'il y ait encore une solution directe depuis Angular.

 <div style="visibility: hidden;">{{activeTitle='home'}}</div>

Answer 5

Vous pouvez utiliser ng-init comme indiqué ci-dessous

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

et ensuite utiliser la variable de portée locale dans d'autres sections :

<div>Total: BW: {{BWCount}}</div>
<div>Total: COLOR: {{ColorCount}}</div>