个人中心
gpt4 book ai didi

javascript - 将子作用域的数据用于父作用域的 ng-repeat

转载 作者：行者123 更新时间：2023-11-29 21:16:11 25 4
gpt4 key购买 nike

已添加更新 2，见下文

首先，这是我正在使用(并且需要修复)的框架的起点:

// index.html
<!doctype html>

<html ng-app="myApp">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="index.js"></script>

  <body>
    <div ng-controller="outerController">
      <div id="copy"></div>
      <hr>
      <div id="src" ng-controller="innerController">
        <table>
          <th>Name</th>
          <th>Type</th>
          <tbody>
            <tr ng-repeat="poke in pokemon">
              <td>{{ poke.name }}</td>
              <td>{{ poke.type }}</td>
            </tr>
            <tr>
              <td>Pikachu</td>
              <td>Electric</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

// index.js
var app = angular.module("myApp", []);

app.controller("innerController", function($scope) {
  $scope.pokemon = [{
    name: "Bulbasaur",
    type: "Grass/Poison"
  }, {
    name: "Charmander",
    type: "Fire"
  }, {
    name: "Squirtle",
    type: "Water"
  }];
});

app.controller("outerController", function($scope) {
  $("#copy").html($("#src").html());
});

如您所见，子 Controller 将通过 ng-repeat 从其作用域的数据生成一个表。这一步就成功了。下一步是父 Controller 将内部 HTML 从 src 复制粘贴到 copy。目的是让 copy 包含由 angularJS 在 src 中完全生成的完整表格的副本。

此步骤失败。只有表格标题和静态皮卡丘行是可见的。在做了一些研究之后，我确定这是因为 pokemon 在父 Controller 无法访问的子 Controller 范围内。复制到 copy 容器中的 HTML 包括整个 ng-repeat 指令。此复制的指令在父范围内，其中 $scope.pokemon 不存在/不包含任何数据，这就是 ng-repeat 中的 copy 未生成任何内容的原因。

我无法将数据放入父 Controller 中。在我的实际应用中，系统采用模块化设计。每个内部 Controller 代表一个模块，该模块从服务器中提取自己的数据集。有多个网页(由外部 Controller 表示)与模块之间存在多对多关系，并且每个网页中的模块组成需要是可修改的。这意味着模块使用的数据必须包含在其自身中。

我该如何纠正这个问题？

更新 1:已编辑。我发布了一个使用 $emit 和 $on 的示例，但应该假定 Robert 的示例是正确的，因为我对此还很陌生。引用他的回答。

更新 2:在测试 Alvaro Vazquez 和 Robert 的解决方案时，我确定了具体的根本原因。当执行 $("#copy").html($("#src").html()); 时，复制的 ng-repeat 在任何数据传输到 outerController 之前执行，或者它从未执行过。最后，修改我最初在上面所做的使其完全正常工作:

var app = angular.module("myApp", []);

$(function() {
  $("#copy").html($("#src").html());
});

app.controller("innerController", function($scope) {
  $scope.pokemon = [{
    name: "Bulbasaur",
    type: "Grass/Poison"
  }, {
    name: "Charmander",
    type: "Fire"
  }, {
    name: "Squirtle",
    type: "Water"
  }];
});

app.controller("outerController", function($scope) {
  $scope.pokemon = [{
    name: "Bulbasaur",
    type: "Grass/Poison"
  }, {
    name: "Charmander",
    type: "Fire"
  }, {
    name: "Squirtle",
    type: "Water"
  }];
});

更改了该特定语句的位置后，剩下的就是将数据传输到 outerController ，此时 Alvaro 和 Robert 的解决方案都有效。

顺便说一句，我认为有些人建议不要使用 $("#copy").html($("#src").html()); 。正如我在评论中部分描述的那样，我正在开发的实际应用程序由多个网页组成，每个网页都包含自己的 outerController 。每个 innerController 都在自己单独的 HTML 文件中，通过 include 指令添加到 src 中。 outerController 复制 src 的内部 HTML，将其传递给第三方库，第三方库将其粘贴到 copy 并控制其视觉布局。 $("#copy").html($("#src").html()); 实际上是第三方库实现的一部分，所以我无法更改它。因此，必须使用此声明。

当我回到家并且可以方便地使用 PC 键盘时，我会发布以上内容作为解决方案。同时，如果您有更好的解决方案，请随时推荐更好的解决方案，谢谢!

最佳答案

我认为您应该使用 Angular 服务。

声明一个服务

首先，您应该声明一个服务，该服务会将数据“提供”给应用程序的其余部分。为了简单起见，我将只展示一个返回预定义数组的方法，但您可以在此处从服务器获取数据。

app.service('pokemonService', function () {
    return {
        getPokemon: function () {
            return [{
                  name: "Bulbasaur",
                  type: "Grass/Poison"
              }, {
                  name: "Charmander",
                  type: "Fire"
              }, {
                  name: "Squirtle",
                  type: "Water"
              }];
        }
    };
});

在 Controller 中使用服务

然后，您可以在任何 Controller 上使用该服务，将其作为任何其他预定义的 Angular 服务注入(inject):

app.controller('innerController', function($scope, pokemonService) {
    $scope.pokemon = pokemonService.getPokemon();
});

app.controller('outerController', function($scope, pokemonService) {
    $scope.outerPokemon = pokemonService.getPokemon();
});

在您的 View 中显示数据

最后，您可以在任何模板/您想要的模板的一部分中列出所有神奇宝贝:

<!doctype html>

<html ng-app="myApp">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="index.js"></script>

  <body>
    <div ng-controller="outerController">
      <div id="copy">
          <!-- Here you can also list the pokémon from your outerController, maybe this time in a list -->
          <ul>
              <li ng-repeat="poke in pokemonOuter">
                  {{ poke.name }} - <span class="type">{{ poke.type }}</span>
              </li>
          </ul>
      </div>
      <hr>
      <div id="src" ng-controller="innerController">
        <table>
          <th>Name</th>
          <th>Type</th>
          <tbody>
            <tr ng-repeat="poke in pokemon">
              <td>{{ poke.name }}</td>
              <td>{{ poke.type }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

总结

如您所见，根本不需要弄乱 DOM。如果你使用 AngularJS，你应该以 Angular 的方式做事，直接使用 DOM 根本不是 Angular 的方式。相反，您应该将所有数据和业务逻辑放入服务中，然后在 Controller 中使用这些服务来检索数据并将其传递给 View 。

关于javascript - 将子作用域的数据用于父作用域的 ng-repeat，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39350426/

25 4 0
文章推荐： mysql - 是否有特定的 MySQL 授予权限允许用户创建和删除其他用户？
文章推荐： android - 在 Android 中按下撤消时会触发哪个事件
文章推荐： mysql - 使用mysql查询对多个条件进行分组
文章推荐： android: Third party library jar uses a library I plan to use,导致dalvik错误 "Unable to execute dex: Multiple dex files define"
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com