不能在一个angular控制器的多个部分HTML场景中访问作用域变量的更新值

Can't access updated value of scope variable in a scenario of multiple partial HTML with single angular controller

本文关键字：HTML 访问 更新 变量 作用域 一个 不能 控制器 angular 个部      更新时间：2023-09-26

我有一个与angular控制器关联的HTML，它使用了两个partial。我把它简化了:

HTML: 

<!DOCTYPE html>
<html>
   <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   <body>
      <!-- It calls one of these two partials for a navigation bar. -->
   </body>
</html>

HTML 1: 

      <div ng-app="myApp" ng-controller="myCtrl">
         Name: <input type="text" ng-model="name" ng-click="myfunction()">
      </div>

HTML 2: 

      <div ng-controller="myCtrl">
         <br>
         Person Name: {{new_name}}
      </div>

控制器:

var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
      $scope.name = "";
      $scope.new_name = "";
      $scope.getQuery = function() {
        $scope.new_name = $scope.name;  
      };
});

现在在HTML 2中，{{new_name}}是在JS中声明的空字符串。但我希望它像HTML 1输入中提到的那样，我的意思是运行时绑定。

我错过了什么吗?

每次写入ng-controller="myCtrl"时，都会创建一个新的控制器实例。这意味着创建了一个新的作用域。要看到这一点，只需在浏览器中检查元素，并在控制器的开头设置一个断点。您将看到创建了两个实例。

我建议你为每个视图设置一个不同的控制器。如果你想在一个页面中显示多个视图，你可以查看名为views的Ui-router。

然后，要在这些控制器之间共享数据，您可以:

  1. 创建一个服务并注入到两个控制器
  2. 使用$scope，让父$scope被子控制器访问。UI-Router嵌套状态
相关文章：