Angular:为什么模型不会在同一控制器的视图外更新?
Angular: Why Won't Model Update Outside Of View In Same Controller?
我发现很多帖子都在谈论 models/views 没有更新,但我还是想不通。我是 Angular 的新手,顺便说一句,所以我怀疑这是菜鸟问题。
我有以下 Angular 应用程序。
编辑文本输入 test_var
时,编辑的值不会在边栏中更新,但会在视图中更新。为什么以及如何修复它?
这在我不使用视图和路由时有效。
我试过侧边栏控制器,但没什么区别。我试过 $rootScope
,它部分起作用(它破坏了其他功能),但我不想使用全局范围。
感谢观看。
HTML
<body>
<div ng-app="rxApp" ng-controller="WizardCtrl">
<div class="ng-view">
</div>
<div class="sidebar">
<span ng-bind="test_var"></span>
</div>
</div>
</body>
查看 (One.html)
<input ng-model="test_var" />
<span ng-bind="test_var"></span>
控制器
rxApp.controller( 'WizardCtrl', function ( $scope, $http, $routeParams, $location, FileUploader ) {
$scope.test_var = 'please work!';
)};
路线
rxApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/one', {
templateUrl: 'templates/one.html',
controller: 'WizardCtrl'
}).
when('/two', {
templateUrl: 'templates/two.html',
controller: 'WizardCtrl'
}).
otherwise({
redirectTo: '/one'
});
}
]);
控制器在变换路线时被释放。
至于最佳实践,您应该创建一个服务来处理该数据。您不应该使用控制器在视图之间传输数据。在你的情况下,问题是控制器在转换路由时被处理。
请参阅 angular 文档了解如何正确使用控制器。 http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller
问题是模型变量的制作。
模型中必须有一个点。让你的模型指向一个对象。
所以在你的控制器中这样做 -
rxApp.controller('WizardCtrl',function($scope, $http, $routeParams,$location, FileUploader){
$scope.test ={
var : 'please work!'
};
)};
查看 (One.html)
<input ng-model="test.var" />
<span ng-bind="test.var"></span>
HTML
<body>
<div ng-app="rxApp" ng-controller="WizardCtrl">
<div class="ng-view">
</div>
<div class="sidebar">
<span ng-bind="test.var"></span>
</div>
</div>
</body>
要阅读有关作用域的更多信息,请阅读此 UnderStanding Scopes
我发现很多帖子都在谈论 models/views 没有更新,但我还是想不通。我是 Angular 的新手,顺便说一句,所以我怀疑这是菜鸟问题。
我有以下 Angular 应用程序。
编辑文本输入 test_var
时,编辑的值不会在边栏中更新,但会在视图中更新。为什么以及如何修复它?
这在我不使用视图和路由时有效。
我试过侧边栏控制器,但没什么区别。我试过 $rootScope
,它部分起作用(它破坏了其他功能),但我不想使用全局范围。
感谢观看。
HTML
<body>
<div ng-app="rxApp" ng-controller="WizardCtrl">
<div class="ng-view">
</div>
<div class="sidebar">
<span ng-bind="test_var"></span>
</div>
</div>
</body>
查看 (One.html)
<input ng-model="test_var" />
<span ng-bind="test_var"></span>
控制器
rxApp.controller( 'WizardCtrl', function ( $scope, $http, $routeParams, $location, FileUploader ) {
$scope.test_var = 'please work!';
)};
路线
rxApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/one', {
templateUrl: 'templates/one.html',
controller: 'WizardCtrl'
}).
when('/two', {
templateUrl: 'templates/two.html',
controller: 'WizardCtrl'
}).
otherwise({
redirectTo: '/one'
});
}
]);
控制器在变换路线时被释放。 至于最佳实践,您应该创建一个服务来处理该数据。您不应该使用控制器在视图之间传输数据。在你的情况下,问题是控制器在转换路由时被处理。
请参阅 angular 文档了解如何正确使用控制器。 http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller
问题是模型变量的制作。
模型中必须有一个点。让你的模型指向一个对象。
所以在你的控制器中这样做 -
rxApp.controller('WizardCtrl',function($scope, $http, $routeParams,$location, FileUploader){
$scope.test ={
var : 'please work!'
};
)};
查看 (One.html)
<input ng-model="test.var" />
<span ng-bind="test.var"></span>
HTML
<body>
<div ng-app="rxApp" ng-controller="WizardCtrl">
<div class="ng-view">
</div>
<div class="sidebar">
<span ng-bind="test.var"></span>
</div>
</div>
</body>
要阅读有关作用域的更多信息,请阅读此 UnderStanding Scopes