user500468 user500468 - 1 month ago 16
AngularJS Question

Get value from directive to $scope in controller

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>

Answer

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

});