拖放错误 - Angular JS答案

【问题标题】：Error in drag-drop - Angular JS拖放错误 - Angular JS
【发布时间】：2016-07-27 08:18:58
【问题描述】：

我按照How to Create simple drag and Drop in angularjs 上的 Angular JS 拖放步骤进行操作，但出现以下错误。

请让我知道我缺少什么。

Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=angular-starter&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fmodulerr%3Fp0%3Dui.router%26p1

我的 index.html 如下：

*<html ng-app="angular-starter">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="angular-drag-and-drop-lists.js"></script>
<script src="app.js"></script>
<body>
<div class="row">
    <div ng-repeat="(listName, list) in models.lists" class="col-md-6">
        <ul dnd-list="list">
            <li ng-repeat="item in list" 
                dnd-draggable="item" 
                dnd-moved="list.splice($index, 1)" 
                dnd-effect-allowed="move" 
                dnd-selected="models.selected = item" 
                ng-class="{'selected': models.selected === item}" 
                draggable="true">{{item.label}}</li>
        </ul>
    </div>
</div>
</body>
</html>
*

而 app.js 是

var app = angular.module('angular-starter', [
    'ui.router',
    'dndLists' ]); app.controller('MainCtrl', function($scope){
    $scope.models = {
        selected: null,
        lists: {"A": [], "B": []}
    };
    // Generate initial model
    for (var i = 1; i <= 3; ++i) {
        $scope.models.lists.A.push({label: "Item A" + i});
        $scope.models.lists.B.push({label: "Item B" + i});
    }
    // Model to JSON for demo purpose
    $scope.$watch('models', function(model) {
        $scope.modelAsJson = angular.toJson(model, true);
    }, true); });

【问题讨论】：

我认为你的模块有问题，你能显示一些代码吗？
我刚刚添加了代码，请看一下。

标签： angularjs drag-and-drop

【解决方案1】：

我认为您没有在 index.html 中添加指向 ui-router 的链接，这可能是错误的来源。

尝试添加：

<script src="your/path/to/angular-ui-router/release/angular-ui-router.min.js"></script>

就在这之后

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="angular-drag-and-drop-lists.js"></script>
<script src="app.js"></script>

希望对你有帮助。

【讨论】：

好吧，您可以尝试使用 dndLists 和 angular-starter 进行相同的操作，我在您的 index.html 中也没有看到。根据错误，我仍然认为这是一个模块问题，但是在这里欢迎其他人的任何帮助，因为我对模块还不是很自信:)

【解决方案2】：

我找到了解决方案，当我尝试从文件夹运行它时它不起作用。我把它放在MAMP 中，它起作用了。也许与其中涉及的角度模块有关。

【讨论】：