0
2つのルート/テンプレートログインとメインを持つアプリがあります。ログインテンプレートのユーザー入力値は、2つの有効範囲変数usernameとisAdminにバインドされています。スコープ変数は、アプリケーション起動時に 'abc'とfalseで初期化されます。入力変更イベントで、コントローラのスコープ変数とテンプレート上の同じ変数の補間値が異なる
問題 - >
コントローラ機能は常に は、アプリケーションの起動時に与えられたものと同じ初期値に束縛されます。ログインテンプレートで が変更されているスコープ変数を反映していません
バインドが正しく行われているかどうかを確認するために{{}}を使用しました。補間された部分は実際に変更された値を反映します。
間違っていると助けてください。
app.controller('appController', function() {
$scope.username = "abc"
$scope.isAdmin = false;
this.radioChange = function() {
console.log($scope.isAdmin) // consoles initialized value always
}
this.textChanged = function() {
console.log($scope.username) // doesn't reflect changed value, shows "abc"
}
})
ログインテンプレート：ログインテンプレートコードがスコープを持っているので
<input type="radio" ng-model="isAdmin" ng-value="true" ng-
change="ctrl.radioChange()">
<input type="radio" ng-model="isAdmin" ng-value="false" ng-
change="ctrl.radioChange()">
<input type="text" ng-model="username" ng-change="ctrl.textChanged()">
{{isAdmin}} // view binded correctly to change
{{username}}
index.htmlを
<body ng-controller="appController as ctrl">
<ui-view> </ui-view>
</body>
app.configを
app.config(['$stateProvider', '$urlRouteProvider', function($stateProvider,
$urlRouterProvider) {
var login = { name: 'login', url: '/', controller='appController',
templateUrl: 'login.html'}
var main = { name: 'main', url: '/main', controller='appController',
templateUrl: 'main.html'}
$stateProvider.state(login);
$stateProvider.state(main);
$urlRouterProvider.otherwise('/');
}])
と呼ばれているスコープの継承の問題を理解するのに役立ちますか？ – Chandermani
@Chandermaniのユーザー名入力テキストが変更されました。変更イベントが発生すると、コントローラーの機能からコンソールされる変数は、常にロード時に初期化された値になります。 {{username}}は値が正しく変更されたことを示します –