0

I'm trying to add multiple angular controllers within the same tr tag, the problem is that chrome rewrites the table to standardize it, and there is no element between tr and td in the HTML table hierarchy.

Here is what I currently have, each color represents a different controller to call. enter image description here The final aim is to have a table like below, with a different controller for one or multiple td, instead or multiple trs angular_tr_td

I know I could use a global controller to handle all the data, or use multiple div elements with a fixed width to achieve this, but I'd prefer using a single tr table.

Here is the code :

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

The following works :

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

Here is what chrome generates :

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

Is there any way I can achieve this ? Is there any tag I could use instead of div to get this to work? Thanks,

4

2 回答 2

1

你可能应该这样做：

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

如果你真的需要div：

<td><div ng-controller="testController2">{{testcontrollerscopevalue}}</div></td>
于 2015-09-15T22:49:47.267 回答
1

正如我们在聊天会话中详细讨论的那样，在这种情况下，最好使用 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;
});

于 2015-09-16T01:57:28.743 回答