Fatal编程技术网

Javascript 角度指令不加载

javascript html angularjs

Javascript 角度指令不加载,javascript,html,angularjs,angularjs-directive,Javascript,Html,Angularjs,Angularjs Directive,我快疯了。我试图在angular应用程序中实现指令，但我甚至无法获得一个简单的模板来显示。如果有人能帮我发现这个问题，我将非常感激！（我对angular很陌生，所以如果有人能找出关于结构的任何错误或提示……我很高兴能得到提示） 抱歉，代码太多了 以下是我的html的重要部分： <!DOCTYPE html> <html ng-app='app'> <head> <link rel="stylesheet" href="https://maxcdn

我快疯了。我试图在angular应用程序中实现指令，但我甚至无法获得一个简单的模板来显示。如果有人能帮我发现这个问题，我将非常感激！（我对angular很陌生，所以如果有人能找出关于结构的任何错误或提示……我很高兴能得到提示）

抱歉，代码太多了

以下是我的html的重要部分：

<!DOCTYPE html>
<html ng-app='app'>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="stylesheets/stylesheet.css">
    <link href="libs/angular-xeditable-0.1.8/css/xeditable.css" rel="stylesheet">
    <title>Kaching</title>
</head>
<body>
    <div id='wrapper' class='container' ng-controller='itemController'>
        <h1>Kaching</h1>
        <kcItemTable>
        </kcItemTable>
        <tabset>
            <tab heading='Oannonserad'>

            <div id='unannounced'>
                <table class='table table-hover'>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Cost</th>
                            <th>Starting Price</th>
                            <th>Ending Price</h>
                            <th>Buyer</th>
                            <th>Comment</th>
                            <th>Status</th>
                            <th>
                                <button class='btn btn-default' ng-click='openModal()'>
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                </button>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat='item in unannouncedItemList'>
                            <td>
                                <a href="#" editable-text="item.name" onaftersave="updateItem(item._id, item)">{{ item.name || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.description" onaftersave="updateItem(item._id, item)">{{ item.description || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.cost" onaftersave="updateItem(item._id, item)">{{ item.cost || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.startprice" onaftersave="updateItem(item._id, item)">{{ item.startprice || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.endprice" onaftersave="updateItem(item._id, item)">{{ item.endprice || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.buyer" onaftersave="updateItem(item._id, item)">{{ item.buyer || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.comment" onaftersave="updateItem(item._id, item)">{{ item.comment || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-select="item.status" e-ng-options="s.value as s.text for s in statuses" onaftersave="updateItem(item._id, item)">{{ showStatus(item) }}</a>
                            </td>
                            <td>
                                <button class='btn btn-danger' ng-click='removeItem(item._id)'>
                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </tab>
        <tab heading='Annonserad'>
            <div id='announced'>
                <table class='table table-hover'>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Cost</th>
                            <th>Starting Price</th>
                            <th>Ending Price</h>
                            <th>Buyer</th>
                            <th>Comment</th>
                            <th>Status</th>
                            <th>
                                <button class='btn btn-default' ng-click='openModal()'>
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                </button>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat='item in announcedItemList'>
                            <td>
                                <a href="#" editable-text="item.name" onaftersave="updateItem(item._id, item)">{{ item.name || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.description" onaftersave="updateItem(item._id, item)">{{ item.description || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.cost" onaftersave="updateItem(item._id, item)">{{ item.cost || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.startprice" onaftersave="updateItem(item._id, item)">{{ item.startprice || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.endprice" onaftersave="updateItem(item._id, item)">{{ item.endprice || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.buyer" onaftersave="updateItem(item._id, item)">{{ item.buyer || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.comment" onaftersave="updateItem(item._id, item)">{{ item.comment || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-select="item.status" e-ng-options="s.value as s.text for s in statuses" onaftersave="updateItem(item._id, item)">{{ showStatus(item) }}</a>
                            </td>
                            <td>
                                <button class='btn btn-danger' ng-click='removeItem(item._id)'>
                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </tab>
        <tab heading='Såld'>
            <div id='sold'>
                <table class='table table-hover'>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Cost</th>
                            <th>Starting Price</th>
                            <th>Ending Price</h>
                            <th>Buyer</th>
                            <th>Comment</th>
                            <th>Status</th>
                            <th>
                                <button class='btn btn-default' ng-click='openModal()'>
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                </button>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat='item in soldItemList'>
                            <td>
                                <a href="#" editable-text="item.name" onaftersave="updateItem(item._id, item)">{{ item.name || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.description" onaftersave="updateItem(item._id, item)">{{ item.description || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.cost" onaftersave="updateItem(item._id, item)">{{ item.cost || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.startprice" onaftersave="updateItem(item._id, item)">{{ item.startprice || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.endprice" onaftersave="updateItem(item._id, item)">{{ item.endprice || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.buyer" onaftersave="updateItem(item._id, item)">{{ item.buyer || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.comment" onaftersave="updateItem(item._id, item)">{{ item.comment || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-select="item.status" e-ng-options="s.value as s.text for s in statuses" onaftersave="updateItem(item._id, item)">{{ showStatus(item) }}</a>
                            </td>
                            <td>
                                <button class='btn btn-danger' ng-click='removeItem(item._id)'>
                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </tab>
        <tab heading='Skickad'>
            <div id='shipped'>
                <table class='table table-hover'>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Cost</th>
                            <th>Starting Price</th>
                            <th>Ending Price</h>
                            <th>Buyer</th>
                            <th>Comment</th>
                            <th>Status</th>
                            <th>
                                <button class='btn btn-default' ng-click='openModal()'>
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                </button>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat='item in shippedItemList'>
                            <td>
                                <a href="#" editable-text="item.name" onaftersave="updateItem(item._id, item)">{{ item.name || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.description" onaftersave="updateItem(item._id, item)">{{ item.description || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.cost" onaftersave="updateItem(item._id, item)">{{ item.cost || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.startprice" onaftersave="updateItem(item._id, item)">{{ item.startprice || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.endprice" onaftersave="updateItem(item._id, item)">{{ item.endprice || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.buyer" onaftersave="updateItem(item._id, item)">{{ item.buyer || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-text="item.comment" onaftersave="updateItem(item._id, item)">{{ item.comment || "empty" }}</a>
                            </td>
                            <td>
                                <a href="#" editable-select="item.status" e-ng-options="s.value as s.text for s in statuses" onaftersave="updateItem(item._id, item)">{{ showStatus(item) }}</a>
                            </td>
                            <td>
                                <button class='btn btn-danger' ng-click='removeItem(item._id)'>
                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </tab>
    </tabset>

    <div id='createNewItemModal'>
        <script type='text/ng-template' id='modalContent.html'>
            <div class='modal-header'>
                <h3 class='modal-title'>Create new item</h3>
            </div>
            <div class='modal-body'>
                <div class='form-group'>
                    <label for="nameInput">Name</label>
                    <input type="input" class="form-control" id="nameInput" placeholder="Name" ng-model='item.name'>
                </div>
                <div class='form-group'>
                    <label for="descInput">Description</label>
                    <input type="input" class="form-control" id="descInput" placeholder="Description" ng-model='item.description'>
                </div>
                <div class='form-group'>
                    <label for="costInput">Cost</label>
                    <input type="input" class="form-control" id="costInput" placeholder="Cost" ng-model='item.cost'>
                </div>
                <div class='form-group'>
                    <label for="startPriceInput">Starting Price</label>
                    <input type="input" class="form-control" id="startPriceInput" placeholder="Starting Price" ng-model='item.startprice'>
                </div>
                <div class='form-group'>
                    <label for="endPriceInput">Ending Price</label>
                    <input type="input" class="form-control" id="endPriceInput" placeholder="Ending Price" ng-model='item.endprice'>
                </div>
                <div class='form-group'>
                    <label for="commentInput">Comment</label>
                    <input type="input" class="form-control" id="commentInput" placeholder="Comment" ng-model='item.comment'>
                </div>
            </div>
            <div class='modal-footer'>
                <button class='btn btn-warning' ng-click="cancelModal()">Cancel</button>
                <button class='btn btn-success' ng-click="addItem()">Create</button>
            </div>
        </script>
    </div>
    </div>

    <!-- Library Scripts -->
    <script src="libs/angular.min.js"></script>
    <script src="libs/angular-xeditable-0.1.8/js/xeditable.min.js"></script>
    <script src="libs/ui-bootstrap-tpls-0.13.0.min.js"></script>

    <!-- Application Scripts -->
    <script src='scripts/app.js'></script>
    <script src='scripts/controllers/itemController.js'></script>
</body>
</html>
您必须在模板中调用指令，如下所示：

<kc-item-table></kc-item-table>
您必须在模板中调用指令，如下所示：

<kc-item-table></kc-item-table>
在您的视图中，将“kcItemTable”的所有实例替换为“kc item table”。

在您的视图中，将“kcItemTable”的所有实例替换为“kc item table”。

我猜您是在试图显示kcItemTable指令吗？在你的html中，它被注释掉了，你也需要这样写出来。对不起，我错误地注释掉了kcItemTable元素。即使没有注释，它也不工作。因为您需要使用kc item table，而不是kcItemTable:）我想您是想显示kcItemTable指令吧？在你的html中，它被注释掉了，你也需要这样写出来。对不起，我错误地注释掉了kcItemTable元素。即使没有注释，它也不起作用。因为您需要使用kc item table，而不是kcItemTable:）这也是一个正确的答案，但另一个答案是让我得到它的答案。这也是一个正确的答案，但另一个答案是让我得到它的答案。好的。我不太熟悉html。但是html中的camel大小写是一个大问题吗？您不能在视图中使用camel大小写作为指令引用。我还发现，当我在指令函数中声明kc item table时，它不起作用。引用在函数中不应该有“连字符”。如果是多个单词，请使用驼峰大小写代替连字符。Ok。我不太熟悉html。但是html中的camel大小写是一个大问题吗？您不能在视图中使用camel大小写作为指令引用。我还发现，当我在指令函数中声明kc item table时，它不起作用。引用在函数中不应该有“连字符”。如果是多个单词，请使用驼峰大小写代替连字符。