输入更改事件时,控制器中的范围变量和模板上同一变量的插值不同
Upon a input change event, scope variable in controller and Interpolated value of same variable on template are different
我有一个应用程序有两个 routes/templates 登录和主。登录模板的用户输入值绑定到两个范围变量 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('/');
}])
这似乎是因为登录模板代码的作用域(父)不同于 appcontroller
作用域(子)。
虽然子作用域可以从父作用域读取属性,但对这些属性(特别是原始类型)的更改会在子作用域上创建一个新的 属性。
从正文中删除 appController
,而是使用通过路由完成的控制器关联(您部分拥有):
var login = { name: 'login', url: '/', controller='appController as ctrl',
templateUrl: 'login.html'}
$stateProvider.state(login);
此外,如果使用控制器作为方法,最好避免范围,因此输入变为
<input type="text" ng-model="ctrl.username" ng-change="ctrl.textChanged()">
最后,这将帮助您理解范围继承的问题https://github.com/angular/angular.js/wiki/Understanding-Scopes
我有一个应用程序有两个 routes/templates 登录和主。登录模板的用户输入值绑定到两个范围变量 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('/');
}])
这似乎是因为登录模板代码的作用域(父)不同于 appcontroller
作用域(子)。
虽然子作用域可以从父作用域读取属性,但对这些属性(特别是原始类型)的更改会在子作用域上创建一个新的 属性。
从正文中删除 appController
,而是使用通过路由完成的控制器关联(您部分拥有):
var login = { name: 'login', url: '/', controller='appController as ctrl',
templateUrl: 'login.html'}
$stateProvider.state(login);
此外,如果使用控制器作为方法,最好避免范围,因此输入变为
<input type="text" ng-model="ctrl.username" ng-change="ctrl.textChanged()">
最后,这将帮助您理解范围继承的问题https://github.com/angular/angular.js/wiki/Understanding-Scopes