web-dev-qa-db-fra.com

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

Question simple: Comment puis-je définir une valeur d’étendue 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/

angularjsangularjs-scope
87
Nix

ng-init ne fonctionne pas lorsque vous affectez des variables dans une boucle. Utilisez {{myVariable=whatever;""}}

Le "" final arrête l'expression angulaire en cours d'évaluation en tant que texte.

Ensuite, vous pouvez simplement appeler {{myVariable}} pour afficher votre valeur de variable.

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

131
Glogo

ngInit peut aider à initialiser des variables.

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

Exemple jsfiddle

79
Mark Coleman

Créez une directive appelée myVar avec

scope : { myVar: '@' }

et appelez ça comme ça:

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

Notez en particulier la référence de la casse de chameau dans la directive au nom de balise à trait d'union.

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

Voici un Fiddle qui montre comment copier des valeurs d'attributs vers des variables d'étendue de différentes manières dans une directive.

19
Ian Mercer

Vous pouvez définir des valeurs à partir de HTML comme ceci .. Je ne pense pas qu'il existe une solution directe de angular pour le moment 

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

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>

puis utilisez la variable de portée locale dans d'autres sections:

<div>Total: BW: {{BWCount}}</div>
<div>Total: COLOR: {{ColorCount}}</div>
3
Mahesh
$scope.$watch('myVar', function (newValue, oldValue) {
        if (typeof (newValue) !== 'undefined') {
            $scope.someothervar= newValue;
//or get some data
            getData();
        }


    }, true);

La variable s'initialise après le contrôleur, vous devez donc la surveiller et ne pas l'initialiser.

1
Senad Mulaosmanović

Si vous n'êtes pas dans une boucle, vous pouvez utiliser ng-init sinon vous pouvez utiliser 

{{var=foo;""}}

le "" ne permet pas d'afficher votre var

0
Yohann JAFFRES

J'aime la réponse, mais je pense qu'il serait préférable de créer une fonction de portée globale qui vous permettra de définir la variable de portée requise.

Donc, dans le globalController créer

$scope.setScopeVariable = function(variable, value){
    $scope[variable] = value;
}

puis dans votre fichier html appelez-le

{{setScopeVariable('myVar', 'whatever')}}

Cela vous permettra ensuite d’utiliser $ scope.myVar dans votre contrôleur respectif.

0
Lance N. Solomon