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

Question simple: Comment puis-je définir une valeur de portée en html, à lire 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/

ng-initne fonctionne pas lorsque vous affectez des variables à l'intérieur de la boucle. Utilisation {{myVariable=whatever;""}}

La fin ""arrête l'évaluation de l'expression angulaire en n'importe quel texte.

Ensuite, vous pouvez simplement appeler {{myVariable}}pour afficher 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 conserver mes informations d'itération actuelles dans une variable au lieu de l'interroger plusieurs fois.

ngInit peut aider à initialiser les variables.

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

exemple jsfiddle

Créez une directive appelée myVaravec

scope : { myVar: '@' }

et appelez-le comme ceci:

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

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

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

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

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

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

Vous pouvez utiliser ng-initcomme 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>

$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 l'utiliser lorsqu'elle n'est pas initialisée.

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 nécessaire.

Donc, dans le globalController, créez

$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

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

{{var=foo;""}}

le "" permet de ne pas afficher votre var