javascript - 使用 AngularJS 打开另一个 div 中的内容

Question

我有一些内容希望使用 Angular 加载到 div 中。例如:

<div class="number-and-description" ng-controller="thingDetails">                               
                                    <div class="number" ng-click="loadContent(thing.number, thing.description, thing.status)" ng-cloak>{{ thing.number }}</div>


                                    <p class="description" ng-click="loadContent(thing.number, thing.description, thing.status)" ng-cloak>{{ thing.description }}</p>
                                </div>  

我在这个 div 之外还有另一个 View ，如下所示:

<!-- Main Content Area -->
            <section class="main-content group" ng-controller="thingDetails">                   
                <h1 ng-cloak>{{ thingNumber }}</h1>
                <div ng-cloak>{{ thingDescription }}</div>
                <div ng-cloak>{{ thingStatus }}</div>

            </section>

在我的 app.js 文件中，我有以下代码:

thingApp.controller('thingDetails', ["$scope", function($scope) {

  $scope.loadContent = function(number, description, status) {

      $scope.thingNumber      = number;
      $scope.thingDescription = description;
      $scope.thingStatus      = status;




      return $scope;

  };



}]);

我的问题是，为什么当这些值更改时主要内容区域 div 不更新？现在它仍然是空白的。 thing.number、thing.description 在我点击的 div 中加载良好 - 该数据来自硬编码的 JSON，看起来很好。问题是，当我单击 div 时，其他主要内容 div 不会显示/更新数据。有人可以帮我吗？请注意，当我 console.log(number) 或 console.log(description) 等时，我可以看到正确的值，因此它们被正确传递到 loadContent() 函数。

Answer 1

您有两个独立的 Controller 实例 thingDetails ，而不是一个。他们每个人都有自己的范围，并且不直接共享任何内容。查看此情况的一个简单方法是在 Controller 中放置一个 console.log() ，您将看到它在每次 Controller 初始化时运行

为了让 Controller 共享数据，您可以使用服务并将该服务注入(inject)到需要访问的任何地方。

或者，您可能不需要两个实例，可以将它们包装在 View 中的一个范围内