Angularjs ng show不适用于自定义指令

我刚刚开始使用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>

和HTML（）：

---

您的浏览器在表外呈现“ng template”，因为它不是tr的有效子级。即使已将replace设置为true，也需要呈现指令，然后才能替换它

您可以看到，这是因为表格，因为这是可行的：

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

{{name}}

见：

---

这是您的浏览器所做的，因此您无法避免

当我看到你的代码时，我想到了几件事

ng include提供了与您的扩展ng模板提案非常相似的功能。如果要根据底层模型的状态加载视图，那么我认为这将是一种方法

如果您不打算从单独的视图文件加载模板，为什么不在td元素上使用ng show（或ng If/ng开关，我更喜欢它）

以下是一些使用ng的示例代码，包括：

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

一个
两个
三

---

这是完整的JSIDLE:。

使用

ng repeat start

和

ng repeat end

指定两个可选的

标记

<div ng-app="demo">
    <table ng-controller="Ctrl">
        <tr ng-repeat-start="name in ['jane', 'john', 'frank']" ng-hide="isSelected(name)">
            <td>{{name}} <button ng-click="select(name)">edit</button></td>
        </tr>
        <tr ng-repeat-end ng-show="isSelected(name)">
            <td>{{name}}!</td>
        </tr>
    </table>
</div>

---

示例：

imo这不是一个带有ng前缀的自定义指令，正如我在问题中解释的那样，我想创建一个带有“显示”模板和“编辑”模板的就地可编辑表。我的示例中的

ng show

条件只是为了证明它不起作用。谢谢，但是1。ng include在

或

元素中不起作用。2.正如我已经多次指出的，这将需要在行内的每个

上使用ng show/hide/if指令。好的，我不知道（1）-听起来很奇怪。那你为什么不在你的屏幕上显示ng show/ng hide/ng if/etc呢？我对你的建议很感兴趣，你认为ng include在表中不起作用，并提出了以下建议：就我所知，似乎工作得很好？我不确定我以前做错了什么：/但这看起来是一个很好的解决方案。我将更新新的fiddle（），看看我更喜欢哪个选项。至于没有ng show/etc。这会导致“编辑”选项始终出现在表的底部。在查看您的示例（我建议使用代码更新您的答案）后，我认为这是更干净的解决方案。我最新的提琴-这是迄今为止我见过的最有效/唯一有效的解决方案。我不确定ng repeat start/end的设计目的是什么，但它比在每个td元素上重复ng show/hide声明要好。我完整的小提琴-

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

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

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

<div ng-app="demo">
    <table ng-controller="Ctrl">
        <tr ng-repeat-start="name in ['jane', 'john', 'frank']" ng-hide="isSelected(name)">
            <td>{{name}} <button ng-click="select(name)">edit</button></td>
        </tr>
        <tr ng-repeat-end ng-show="isSelected(name)">
            <td>{{name}}!</td>
        </tr>
    </table>
</div>

var demo = angular.module("demo", []);

demo.controller("Ctrl",
function Ctrl($scope) {
    var selected;
    $scope.isSelected = function(name) {
        return selected === name;
    };
    $scope.select = function(name) {
        selected = name;
    };
});