This is the same problem from before, you are fighting the framework. You are building this application as if it were a jQuery app, and it isn't. I don't know if this will make sense, but...
jQuery uses imperative programming, "get the data, do this, add this stuff to the DOM". Angular uses declarative programming. "this is how my DOM should look once there's data", "this is where you get data from" In general, if you find yourself using 'element' or $ at all, you're almost always fighting against angular instead of working with it. Build your directive template with ng-repeat and ng-click and you don't need to actually do all that. Angular takes care of adding on-click methods and stuff, you just have to say, "okay here's that array of table data" and the ng-repeat will build the table for you... owait, sander just beat me to it. e On Aug 21, 2014 3:00 AM, <[email protected]> wrote: > I have a post request in angularjs that get's a string pattern from my > backend: > > var tabledata = ""; >> $http.post("lib/action.php", {monsters: >> $scope.getMonsters}).success(function(data) { >> tabledata = data; //Assign the pattern >> }).error(function(data) { console.log("error"); }); >> >> > > The thing I want to accomplish is that I want my directive to execute > AFTER that the post request has been completed, because now when I run my > application, the tabledata is just an empty string, and therefor, my > makeTableFrom function is returning an empty result. > > Here is my directive: > > > >> 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">')); >> } >> } >> }); >> }); >> } >> };}); >> >> > > > > -- > You received this message because you are subscribed to the Google Groups > "AngularJS" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To post to this group, send email to [email protected]. > Visit this group at http://groups.google.com/group/angular. > For more options, visit https://groups.google.com/d/optout. > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
