我的 angularjs 应用程序中的错误答案

【问题标题】：Error in my angularjs application我的 angularjs 应用程序中的错误
【发布时间】：2014-08-22 12:23:12
【问题描述】：

当我尝试导航到我的 angularjs 应用程序时收到以下错误消息：

Error: [$injector:unpr] http://errors.angularjs.org/1.2.22/$injector/unpr?p0=linkProvider%20%3C-%20link w/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:6:443 gc/l.$injector<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:36:139 c@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:34:204 gc/p.$injector<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:36:209 c@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:34:204 d@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:34:418 f/<.instantiate@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:35:101 Pd/this.$get</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:67:249 v/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:53:373 r@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:7:369 v@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:53:237 g@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:47:117 g@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:47:117 u/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:46:255 fc/c/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:18:200 Zd/this.$get</k.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:112:4 Zd/this.$get</k.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:112:269 fc/c/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:18:158 d@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:34:474 fc/c@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:18:66 fc@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:18:270 Xc@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:17:359 @https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:214:78 n.Callbacks/j@https://code.jquery.com/jquery-1.11.0.min.js:2:27128 n.Callbacks/k.fireWith@https://code.jquery.com/jquery-1.11.0.min.js:2:27898 .ready@https://code.jquery.com/jquery-1.11.0.min.js:2:29742 K@https://code.jquery.com/jquery-1.11.0.min.js:2:30052

我点击了链接，但看不到问题所在。

这是我的控制器：

var gameApp = angular.module("gameApp", ['ngRoute','ngSanitize']);

gameApp.directive('mapActivity', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch('tabledata', function() {

             angular.element('.click#1').addClass('dotted').html($("<img src='images/dot.png'>"));          
                var j = null;
                for(var i = 1; i <= 4; i++)
                {
                    $.ajax({
                        type: 'GET',
                        url: 'lib/terrain.php',
                        dataType: 'html',
                        data: {i: i},
                        success: function(data) {
                            var randomRuta = Math.floor((Math.random() * 100) + 1);
                            angular.element('.click#'+randomRuta).addClass('monster').html($("<img src='images/blackdot.png' title='"+data+"'>"));                  
                        },
                        error: function(xhr, ajaxOptions, thrownError) { alert(thrownError); }
                    });
                    j=i;
                }  
                angular.element('.click').click(function() {
                    if(angular.element(this).hasClass('monster'))
                    {
                        if(confirm('Vill du anfalla monster?'))
                        {
                            alert("Du vann");
                            angular.element('.click.monster'+j).empty();
                            angular.element('.click.monster').removeClass('monster'+j);

                            angular.element('.click.dotted').empty();
                            angular.element('.click.dotted').removeClass('dotted');
                            angular.element(this).addClass('dotted');
                            angular.element('.click.dotted').html($('<img src="images/dot.png">'));
                        }
                    }
                    else
                    {
                        angular.element('.click.dotted').empty();
                        angular.element('.click.dotted').removeClass('dotted');

                        if(!angular.element(this).hasClass('dotted'))
                        {
                            angular.element(this).addClass('dotted');
                            angular.element(this).html($('<img src="images/dot.png">'));
                        }
                    }
                });
            });                     
        }
    };
});

function makeTableFrom(str) {
    var k = 1;
    result = "";

    for(var i = 1; i <= 8; i++) {
        result += '<tr>';

        for(var j = 1; j <= 20; j++) {
            if(str[k] == '#') {
                result += '<td id=' + k + '">#</td>';
            }
            else if(str[k] == '&') {
                result += '<td class="click" val="water" id="' + k + '">&</td>';
            }
            else {
                result += '<td class="click" id="' + k + '"></td>';
            }

            k++;
        }
        result += '</tr>';
    }
    return result;
}

gameApp.controller("gameCtrl", function($scope,$http,link,$location,$sce,$rootScope) {
    $scope.resultLoaded = false;
    $scope.getMonsters = "1";
    var tabledata = ""; //Variable to store pattern for html table

    $http.post("../lib/action.php", {monsters: $scope.getMonsters}).success(function(data) {    
        //tabledata = data; //Assign the pattern
        $scope.result = makeTableFrom(data); //Call the function to build the table based on the pattern
        $scope.resultLoaded = true;
    }).error(function(data) { console.log("error"); });
    console.log(tabledata);

    $scope.safeHtml = function() {
        return $sce.trustAsHtml($scope.result);
    };
    if(link.user) {
        /*$scope.message = "fisk";
        console.log(link.user);*/
    } else {
        /*$scope.message = "Ledsen fisk";
        console.log("Är inte satt");*/
    }
});

这是我的 HTML：

<!DOCTYPE html>
<html ng-app="gameApp">
<head>
<meta content="text/html;charset=UTF-8" http-equiv="content-type" />
</head>
<body ng-controller="gameCtrl">
<div ng-if='resultLoaded'>
    <table ng-bind-html="safeHtml()" map-Activity>
    </table>
</div>
</body>
</tml>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.22/angular-route.js"></script>
<script src="https://code.angularjs.org/1.2.22/angular-sanitize.js"></script>
<script src="../js/gamecontroller.js"></script>

正如我所说，我已单击链接查看错误是由什么引起的，但我不明白它是什么。谁能帮帮我？

【问题讨论】：

在 gameCtrl 上你有 function($scope,$http,link,...，link 依赖是导致错误的原因。由于 Angular 找不到该依赖项的提供者，因此会产生错误。 link 是服务吗？如果是，请确保已加载。

标签： javascript angularjs error-handling

【解决方案1】：

我用你的代码做了一个笨拙的例子......

我稍微更改了应用程序只是为了制作更好的架构，我不知道您是否按照您在此处发布代码的方式来执行您的应用程序，但如果是，我强烈建议您更改此设置，因为在短时间内你会很头疼维护你的代码...

不管怎样，看看我的笨蛋...link to plunker gameApp example

注意细节，例如控制器上的DI（依赖注入）：

controllers.js 文件

angular.module('gameApp_controllers')
    .controller('gameCtrl', ['$scope', '$http', '$location', '$sce', '$rootScope', 'link',
         function($scope, $http, $location, $sce, $rootScope, link){
             // controller content
}]);

另外，app.js 文件更干净，你只需要声明你的应用和你需要的模块

app.js

var gameApp = angular.module("gameApp", [
  'ngRoute',
  'ngSanitize',
  'gameApp_controllers',
  'gameApp_directives',
  'gameApp_services'
]);

angular.module('gameApp_controllers', []);
angular.module('gameApp_directives', []);
angular.module('gameApp_services', []);

之后，您可以为每个事物（控制器、服务、指令、路由等）创建一个文件，或者您可以为多个事物（usersController.js、fooController.js 等）创建多个文件

您将如何组织您的应用程序取决于您，但通过这种方式，应用程序的结构更清晰，更易于理解...

还有一件事：

代码失败，因为控制器的注入器找不到方法满足对称为“链接”的服务的请求。你是否试图将指令中的链接函数引用为服务？

是的，这是真的，你没有一个“链接”服务，你也没有在你的控制器中创建 DI...

【讨论】：

【解决方案2】：

代码失败是因为控制器的注入器无法找到一种方法来满足对名为“链接”的服务的请求。您是否尝试将指令中的链接函数引用为服务？

我在您的链接功能中没有看到对用户的任何引用，因此您可能在其他地方有另一个可用的名为链接的服务未正确创建，或者您在指的是其他现有服务时键入了链接。

希望对您有所帮助。

【讨论】：