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

发布时间：2020-12-17 17:31:07 所属栏目：安全来源：网络整理

导读：我刚刚开始使用AngularJS,并希望创建一个自定义模板指令来创建“就地”可编辑表.想法是有类似的东西： tr ng-repeat="customer in model.customers" ng-template ng-hide="customer === model.selectedCustomer" !-- display template-- td{{customer.name}}

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

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

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

解决方法

当我查看你的代码时,我会发生一些事情.

> ng-include提供了与扩展ng-template的提议非常相似的功能.如果您要根据基础模型的状态加载视图,那么我认为这将是一种方法.
>如果您不打算从单独的视图文件加载模板,为什么不在您的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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!