web-dev-qa-db-ja.com

マークアップでangularスコープ変数を設定します

簡単な質問：コントローラーで読み取られるように、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>

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

angularjsangularjs-scope
91
Nix

ループ内で変数を割り当てる場合、ng-initは機能しません。 {{myVariable=whatever;""}}を使用

末尾の""は、任意のテキストに評価されるAngular式を停止します。

その後、単に{{myVariable}}を呼び出して変数値を出力できます。

これは、複数のネストされた配列を反復するときに非常に便利であり、複数回照会するのではなく、現在の反復情報を1つの変数に保持したいと考えました。

133
Glogo

ngInit は変数の初期化に役立ちます。

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

jsfiddleの例

79
Mark Coleman

myVarという名前のディレクティブを作成します

scope : { myVar: '@' }

次のように呼び出します：

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

特に、ディレクティブ内のハイフン付きタグ名へのキャメルケースの参照に注意してください。

詳細については、ここで「トランスクルージョンとスコープについて」を参照してください。 http://docs.angularjs.org/guide/directive

これはフィドルです これは、ディレクティブ内でさまざまな方法で属性からスコープ変数に値をコピーする方法を示しています。

19
Ian Mercer

このようにhtmlから値を設定できます。 angularからの直接的な解決策はまだないと思います。

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

以下に示すようにng-initを使用できます

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

次に、他のセクションでローカルスコープ変数を使用します。

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

変数はコントローラーの後に初期化されるので、それを監視し、初期化されていない場合は使用する必要があります。

1
Senad Mulaosmanović

ループしていない場合は、ng-initを使用できます。

{{var=foo;""}}

「」は変数を表示しません

0
Yohann JAFFRES

答えは好きですが、必要なスコープ変数を設定できるグローバルスコープ関数を作成する方が良いと思います。

したがって、globalController create

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

そして、あなたのhtmlファイルでそれを呼び出します

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

これにより、それぞれのコントローラーで$ scope.myVarを使用できるようになります

0
Lance N. Solomon