javascript - Angular Directive(指令)未加载

标签 javascript html angularjs angularjs-directive

我要疯了。我正在尝试在我的 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>

这是我的完整 Controller :

var app = angular.module('app', ['xeditable', 'ui.bootstrap'])

app.run(function(editableOptions) {
    console.log('running xeditable')
    editableOptions.theme = 'bs3'
});

function logSuccess(data, status, headers, config) {
    console.log(status)
    console.log(headers())
    console.log(config)
    console.log(data)
} 

function logError(data, status, headers, config) {
    console.log(status)
    console.log(headers())
    console.log(config)
    console.log(data)
}

app.controller('itemController', ['$scope', '$http', '$modal', '$filter', function($scope, $http, $modal, $filter) {

    var refresh = function() {
        console.log('Getting items')

        $http.get('/items').success(function(data, status, headers, config) {
            logSuccess(data, status, headers, config)

            $scope.unannouncedItemList = data.unannounced
            $scope.announcedItemList = data.announced
            $scope.soldItemList = data.sold
            $scope.shippedItemList = data.shipped
        }).error(function(data, status, headers, config) {
            logError(data, status, headers, config)
        })
    }

    $scope.$on("refresh", function (event, args) {
        refresh()
    });

    refresh()

    $scope.statuses = [
        {value: 'UNANNOUNCED', text: 'Oannonserad'},
        {value: 'ANNOUNCED', text: 'Annonserad'},
        {value: 'SOLD', text: 'Såld'},
        {value: 'SHIPPED', text: 'Skickad'}
    ];

    $scope.showStatus = function(item) {
        var selected
        $scope.statuses.forEach(function(entry) {
            if (entry.value == item.status) {
                selected = entry
            }
        })
        return (item.status && selected) ? selected.text : 'Not set';
    };

    $scope.openModal = function() {
        var modalInstance = $modal.open({
            animation: true,
            templateUrl: 'modalContent.html',
            controller: 'modalInstanceController',
            size: null,
            scope: $scope
        });
    }

    $scope.removeItem = function(id) {
        console.log(id)

        $http.delete('/items/' + id).success(function(data, status, headers, config) {
            logSuccess(data, status, headers, config)   
            refresh()
        }).error(function(data, status, headers, config) {
            logError(data, status, headers, config)
        })
    }

    $scope.updateItem = function(id, item) {
        console.log("Update item with id: " + id)
        console.log("Item to update: " + item)

        $http.put('/items/' + id, item).success(function(data, status, headers, config) {
            logSuccess(data, status, headers, config)
            refresh()
        }).error(function(data, status, headers, config) {
            logError(data, status, headers, config)
        })
    }
}])

app.controller('modalInstanceController', ['$scope', '$http','$modalInstance', function ($scope, $http, $modalInstance) {
    $scope.addItem = function() {
        console.log('Post item')

        var item = $scope.item
        item.status = 'UNANNOUNCED'

        $http.post('/items' , item).success(function(data, status, headers, config) {
            logSuccess(data, status, headers, config)
            $modalInstance.dismiss('cancel')
            $scope.$emit('refresh');
        }).error(function(data, status, headers, config) {
            logError(data, status, headers, config)
        })
    }

    $scope.cancelModal = function () {
        $modalInstance.dismiss('cancel')
    }
}])

app.directive('kcItemTable', function() {
    return {
        restrict: 'E',
        template: 'habba habba'
    }
})

最佳答案

在您看来，将“kcItemTable”的所有实例替换为“kc-item-table”。

关于javascript - Angular Directive(指令)未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31303104/

上一篇：javascript - 如何仅在设备处于 xs View 时添加点击处理程序？

下一篇：javascript - 计算 JavaScript/Angular 中填充对象的数组中变量的出现次数

相关文章：

javascript - Angularjs 按特定元素过滤

javascript - JSON 对象不会使用 ajax 传输到 js 数组

javascript - 如何将文本框中的值保存到变量

javascript - 重定向时 Angular 刷新浏览器

强制刷新的 HTML 链接？

html - 处理输入 :focus + label in css

javascript - Angular : is an app crawlable with no href but only ng-click function?

javascript - JS/TS 中的确定性字符串比较？

javascript - 使用 Bootstrap JQuery 和 Mandril 表单中的复选框

javascript - 像 9gag.com 一样在屏幕上滚动多个侧边栏 div

©2024 IT工具网  联系我们