输入更改事件时，控制器中的范围变量和模板上同一变量的插值不同

Question

我有一个应用程序有两个 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('/');

  }])

Answer 1

这似乎是因为登录模板代码的作用域（父）不同于 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

输入更改事件时，控制器中的范围变量和模板上同一变量的插值不同

Upon a input change event, scope variable in controller and Interpolated value of same variable on template are different

angularjs

controller

angular-ui-router

angularjs-scope