0

I am trying to make a product configurator for a website. I'm using MEAN but at this point I just have a problem with AngularJS.

I proceed to explain my program. In the application you have three buttons for the first step of the configuration.

When you click one, AngularJS send back to the web the next three buttons (the values of this buttons depends on the first one you click). And here arrives the problem, this last buttons doesnt seems to work.

After clicking the first button I call the function $scope.getOption2 and it returns this:

htmlsString= '<div><button id="btnS2-1" ng-click= getOption3(1)>1</button></div>'+
             '<div><button id="btnS2-2" ng-click= getOption3(2)>2</button></div>'+
             '<div><button id="btnS2-3" ng-click= getOption3(3)>3</button></div>';        

And this is the way I print it on screen: $scope.option2 = $sce.trustAsHtml(pruebaHTML);

But the function $scope.getOption3 is never called when I click in one of those buttons.

I have simplified the code, but the essential part is here. I hope somebody can see my problem.

1 Answer 1

1

Appending elements like this is not the Angular way, and is frowned upon. Angular does not know of your new buttons, because you cannot manipulate your DOM in this way. You could $compile your elements again, but maybe you should just have the buttons in your template to begin with, you could show them with ngShow. Maybe better yet, see if there is some directive out there that can do what you want - or roll your own.

Look http://docs.angularjs.org/api/ng.$compile for details on $compile.

1
  • Thanks, I was guessing something similar but i wanna try it anyway. The problem that I have is that the number of buttons in each step is going to change from one product to another, so I'll look for some solution to this. Thanks again
    – Gonzalo
    Nov 27, 2014 at 12:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.