Question

我正在尝试在同一个tr标签中添加多个角度控制器，问题是chrome重写表以使其标准化，并且HTML表层次结构中tr和td之间没有元素。

这是我目前拥有的，每种颜色代表一个不同的控制器。最终目标是拥有一个如下表所示的表格，其中包含一个或多个td的不同控制器，而不是多个td

我知道我可以使用全局控制器来处理所有数据，或者使用具有固定宽度的多个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来使这个工作？谢谢，

Answer 1

您应该这样做：

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

如果你真的需要div：

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

Answer 2

正如我们在chat session中详细讨论的那样，这是一个使用ControllerAs语法最好地服务的情况，并将func didSelectItem(indexPath: Int){ // Initialize View controllers switch(indexPath){ case 1: self.removeFromParentViewController() vc1.title = "Learning Stories" self.addChildViewController(vc1) self.view.addSubview(vc1.view) vc1.willMoveToParentViewController(self) case 2: self.removeFromParentViewController() vc2.title = "Group Stories" self.addChildViewController(vc2) self.view.addSubview(vc2.view) vc2.willMoveToParentViewController(self) default: self.removeFromParentViewController() self.addChildViewController(vc3) self.view.addSubview(vc3.view) vc3.willMoveToParentViewController(self) } }元素包装在多个<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

在同一个中获取多个Angular.js控制器

2 个答案: