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之外还有另一种观点：

<!-- 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时，OTHER主内容div不显示/更新数据。有人可以帮帮我吗？请注意，当我console.log(number)或console.log(description)等时，我可以看到正确的值，因此它们正确地传递给loadContent()函数。

Answer 1

您有两个独立的控制器thingDetails实例，而不是一个。他们每个人都有自己的范围，不直接分享任何东西。一个简单的方法是在控制器中放置一个console.log()，每次控制器初始化时都会看到它运行

对于控制器共享数据，您使用服务并将该服务注入需要访问的任何位置。

或许您可能不需要两个实例，并且可以将它们包装在视图中的一个范围内

Answer 2

你基本上是在这里用两个不同的范围创建两个控制器。因此，在外部div中，$ scope.thingNumber，description等未定义，因为您只更改内部范围的值。

对此问题进行快速而混乱的修复是将$ scope更改为$ rootScopes。这样做的正确方法是通过服务/工厂。

使用AngularJS在另一个div中打开内容

2 个答案: