错误我angularjs应用 [英] Error in my angularjs application
问题描述
我收到的时候我尝试导航到我的应用程序angularjs以下错误消息：
I get the following error message when I'm trying to navigate to my angularjs app:
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
我已经点击了链接，但是无法看到的问题是什么。
I have clicked on the link, but Can't see what the problem is.
下面是我的控制器：
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>
正如我所说的，我点击了链接，看看有什么错误所致，但我不明白它是什么。人谁可以帮我吗？
As I said, I've clicked on the link to see what the error is caused by, but I can't understand what it is. Anyone who can help me?
推荐答案
我已经使用code做了一个plunker例如...
I've made one plunker example using your code...
我改变了应用程序了一下只是为了更好的architeture，我不知道你在做你的应用程序在你发布你的code来这里的路上，但如果你是，我强烈建议你改变这一点，因为在很短的时间，你将有马丽娟头痛保持你的code ...
I changed the app a bit just to make a better architeture, i dont know if you are doing your app in the way you posted your code here, but if you are, I strongly recommend you to change this, because in a short time you will have greate headaches to maintain your code...
不管怎样，先看看我的plunker ...... 链接plunker gameApp例如
Anyway, take a look at my plunker... link to plunker gameApp example
，请注意细节，例如，在控制器对DI（依赖注射）：
Pay attention to the details, for example, the DI (dependence injection) on controller:
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文件是更干净，你只申报您的应用程序和模块，需要
Also, the app.js file is more clean, you only declare your app and the modules you need
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等）多个文件
After that you can create one file for each thing (controllers, services, directives, routes, etc) or you can create multiple files for multiple things (usersController.js, fooController.js, etc...)
您将如何组织你的应用程序是你的，但以这种方式，应用程序得到一个更干净的结构，更容易掌握prehend ...
How you will organize your app is up to you, but in this way, the app get a more clean structure and is more easy to comprehend...
还有一件事：
在code失败，因为控制器的喷油器不能找到一种方法
完成一个名为链接的服务请求。你们是不是要
引用链接功能的指令作为一种服务？
The code is failing because the controller's injector can't find a way to fulfill the request for a service called "link". Are you trying to reference the link function in the directive as a service?
是的，这是真的，你没有一个链接的服务，你也没曾控制器做出的DI ...
Yes, this is true, you didn't had one "link" service, also you didn't had made the DI in your controller...
这篇关于错误我angularjs应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
