为同一 <tr> 中的多个 <td> 获取多个 Angular.js 控制器

Question

我试图在同一个 tr 标签中添加多个 angular 控制器，问题是 chrome 重写了 table 以使其标准化，并且两者之间没有元素HTML table 层次结构中的 tr 和 td。

这是我目前拥有的，每种颜色代表要调用的不同控制器。最终目标是有一个像下面这样的 table，一个或多个 td 有不同的控制器，而不是多个 trs

我知道我可以使用全局控制器来处理所有数据，或者使用多个具有固定宽度的 div 元素来实现这一点，但我更喜欢使用单个 tr table .

这是代码：

<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 来让它工作？谢谢，

Answer 1

你应该这样做：

<td ng-controller="testController2">{{testcontrollerscopevalue}}</td>

如果你真的需要 div:

<td><div ng-controller="testController2">{{testcontrollerscopevalue}}</div></td>

Answer 2

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

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

<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>

为此，您的变量需要转换为控制器的属性，而不是 $scope.

的属性

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

为同一 <tr> 中的多个 <td> 获取多个 Angular.js 控制器

Get multiple Angular.js controllers for multilple <td> within the same <tr>

javascript

google-chrome

angularjs

ng-controller