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