javascript - 为同一个 <tr> 中的多个 <td> 获取多个 Angularjs Controller

我试图在同一个 tr 标签中添加多个 Angular Controller ，问题是 chrome 重写了表格以使其标准化，并且 HTML 表格层次结构中 tr 和 td 之间没有元素。

这是我目前拥有的，每种颜色代表要调用的不同 Controller 。最终目标是拥有一个如下所示的表，其中一个或多个 td 使用不同的 Controller ，而不是一个或多个 tr

我知道我可以使用全局 Controller 来处理所有数据，或者使用具有固定宽度的多个 div 元素来实现此目的，但我更喜欢使用单个 tr 表。

这是代码:

<table>
    <tr>
        <div ng-controller="testController">
            <td>{{testcontrollerscopevalue}}</td> <!-- empty when displayed -->
            <td>{{testcontrollerscopevalue2}}</td> <!-- empty when displayed -->
            <td>{{testcontrollerscopevalue3}}</td> <!-- empty when displayed -->
        </div>
        <div ng-controller="testController2"> 
            <td>{{testcontroller2scopevalue}}</td> <!-- empty when displayed -->
        </div>
    </tr>
</table>

以下作品:

 <table ng-controller="testController">
        <tr>
            <td>{{testcontrollerscopevalue}}</td> <!-- set when displayed-->
        </tr>
    </table>

这是 chrome 生成的内容:

<body>
<div ng-controller="testController"></div>
<div ng-controller="testController2"></div>
<table>
    <tbody>
    <tr>
        <td>{{testcontrollerscopevalue}}</td> <!-- out of scope-->
        <td>{{testcontrollerscopevalue2}}</td> <!-- out of scope-->
        <td>{{testcontrollerscopevalue3}}</td> <!-- out of scope-->
        <td>{{testcontroller2scopevalue1}}</td> <!-- out of scope-->
    </tr>
    </tbody>
</table>

<小时/>

 <table ng-controller="testController">
        <tbody>
        <tr>
            <td>{{testcontrollerscopevalue}}</td> <!-- set -->
        </tr>
        </tbody>
    </table>

有什么办法可以实现这个目标吗？我可以使用任何标签来代替 div 来使其正常工作吗？谢谢，

最佳答案

正如我们在 chat session 中详细讨论的那样，在这种情况下，最好使用 ControllerAs 语法并包装 <table>多个元素<div>保存每个 Controller 逻辑的元素。

我的建议类似于以下代码:

<div ng-controller="testController as tc">
  <div ng-controller="testController2 as tc2">
    <table>
      <tbody>
        <tr>
          <td>{{tc1.testcontrollervalue}}</td>
          <td>{{tc1.testcontrollervalue2}}</td>
          <td>{{tc1.testcontrollervalue3}}</td>
          <td>{{tc2.testcontroller2value1}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

为此，您的变量需要转换为 Controller 的属性，而不是 $scope 的属性。 .

var tc1 = this; //consistent reference to controller object
SomeService.get(function(data) {
  tc1.someProperty = data;
});

关于javascript - 为同一个 <tr> 中的多个 <td> 获取多个 Angularjs Controller ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32596865/

javascript - 为同一个 <tr> 中的多个 <td> 获取多个 Angularjs Controller

上一篇：javascript - 根据 prop 有条件地添加元素

下一篇：javascript - 模块合并 - 它是如何工作的？