In my Directive, I've getting some data from my backend like this:
var monster_info = angular.element(this).find("img").attr("title");
$http.get("lib/terrain.php", {params: { monster_data:monster_info}}).success(function(data) {
console.log(data);
});
I want this data to appear at my site, so I've tried to declare a variable like this in my controller: $scope.fish = [];
Then I just assign the data value like this in my directive: $scope.fish = data;
But nothing is printed out. How does the communication between controller and directive work? How should I share this kind of data?
Here is my whole directive:
angular.module('gameApp_directives').
directive('mapActivity', function($http) {
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'))
{
var monster_info = angular.element(this).find("img").attr("title");
$http.get("lib/terrain.php", {params: { monster_data:monster_info}}).success(function(data) {
console.log(data);
});
/*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">'));
}
}
});
});
}
};
});
Here is my controller:
angular.module('gameApp_controllers')
.controller('gameCtrl', ['$scope', '$http', '$location', '$sce', '$rootScope', 'link', function($scope, $http, $location, $sce, $rootScope, link) {
$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"); });
$scope.fish = [];
$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");*/
}
}]).controller('firstPageCtrl', ['$scope','$http','$location','$sce','$rootScope','link', function($scope, $http, $location, $sce, $rootScope, link) {
$scope.doLogin = function() {
$http.post("lib/action.php", {username: $scope.username, password: $scope.password}).success(function(data) {
if(data) {
link.user = data;
console.log(link.user);
$location.path("/game");
}
}).error(function(data) {
console.log(data);
});
};
}]);
Anyone who can help me?
Here is my HTML
<div id="layout_game">
<div ng-controller="gameCtrl">
<div ng-if='resultLoaded' id="rightcontent_game">
<table ng-bind-html="safeHtml()" map-Activity>
</table>
</div>
<div id="leftcontent_game">
<div id="leftcontent_top">
<ul>
<li><a href="#">Vildmarken</a></li> <li> | </li> <li><a href="#">Marknaden</a></li> <li> | </li> <li><a href="#">Värdshuset</a></li>
</ul>
</div>
{{fish}}
</div>
</div>
</div>
I would just broadcast an event from the directive like this:
$rootScope.$broadcast('fishChange', fishValue);
And then in the controller listen for that event:
$scope.$on('fishChange', function(event, fishValue) {
// Do whatever you want here
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments