angularjs - ng-show 不适用于自定义指令

Question

我刚刚开始使用 AngularJS，想创建一个自定义模板指令来创建“就地”可编辑表。这个想法是有类似的东西:

    <tr ng-repeat="customer in model.customers">
        <ng-template ng-hide="customer === model.selectedCustomer"> <!-- display template-->
            <td>{{customer.name}}</td>
        </ng-template>
        <ng-template ng-show="customer === model.selectedCustomer"> <!-- edit template -->
            <td><input type="text" ng-model="customer.name"/></td>
        </ng-template>
    </tr>

然后它也可以扩展为指定一个 templateUrl，例如 <ng-template template-url="foo.html"></ng-template>
当我申请 ng-show指令到我的自定义指令它不起作用。这是我的指令的代码:

var demo = angular.module("demo", [])
.directive("ng-template", function() {
    return {
        restrict: "E",
        replace: true,
        transclude: true
    }
});

和 HTML ( http://jsfiddle.net/benfosterdev/ASXyy/ ):

<div ng-app="demo">
    <table>
        <tr ng-repeat="name in ['jane', 'john', 'frank']">
            <ng-template ng-show="name !== 'frank'">
                <td>{{name}}</td>
            </ng-template>
        </tr>
    </table>
</div>

此外，当我查看生成的 HTML 时，我的自定义指令甚至没有出现在表格中:

<div ng-app="demo" class="ng-scope">
    <ng-template ng-show="name !== 'frank'" class="">
    </ng-template>
    <table>   
        <tbody>
          ...
        </tbody>
    </table>
</div>

本质上，我试图避免编写这样的代码(在每个 ng-show 元素上设置 <td> 指令):

<table>
    <tr ng-repeat="customer in customers">
        <ng-template>
            <td ng-hide="isSelected">{{customer.name}}</td>
            <td ng-hide="isSelected">{{customer.age}}</td>
            <td ng-hide="isSelected"><button ng-click="edit(customer)"</td>
            <td ng-show="isSelected"><input type="text" ng-model="customer.name"/></td>
            <td ng-show="isSelected"><input type="text" ng-model="customer.age"/></td>
            <td ng-show="isSelected"><button ng-click="save(customer)"</td>
        </ng-template>
    </tr>
</table>

Answer 1

当我查看您的代码时，我想到了一些事情。

ng-include 提供了与您的扩展 ng-template 提议非常相似的功能。如果您要根据基础模型的状态加载 View ，那么我认为这将是可行的方法。

如果您不打算从单独的 View 文件加载模板，为什么不在您的 td 元素上使用 ng-show(或 ng-if/ng-switch，在大多数情况下我更喜欢)？

下面是一些使用 ng-include 的示例代码:

<table>
    <thead>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th></th>
    </thead>
    <tbody>
        <tr ng-repeat="item in items" ng-include="getTemplate(item)"></tr>
    </tbody>
</table>

这是完整的 JSFiddle: http://jsfiddle.net/qQR6j/2 .