ng-click Does not work with elements created dynamically

Asked

Viewed 694 times

2

Good night I have this method

$scope.register_popup = function(id, name)
        {

            for(var iii = 0; iii < popups.length; iii++)
            {   
                //already registered. Bring it to front.
                if(id == popups[iii])
                {
                    Array.remove(popups, iii);

                    popups.unshift(id);

                    $scope.calculate_popups();


                    return;
                }
            }               

            var element = '<div class="popup-box chat-popup" id="'+ id +'">';
            element = element + '<div class="popup-head">';
            element = element + '<div class="popup-head-left">'+ name +'</div>';
            element = element + '<div class="popup-head-right"><a href="javascript:;" ng-click="close_popup(\''+ id +'\');">&#10005;</a></div>';
            element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';

            document.getElementById("chat").innerHTML = document.getElementById("chat").innerHTML + element;  

            popups.unshift(id);

            $scope.calculate_popups();

        }

I mean, I have a dynamically created div. Look at this line:

element = element + '<div class="popup-head-right"><a href="javascript:;" ng-click="close_popup(\''+ id +'\');">&#10005;</a></div>';

in ng-click, I call one more method, which in this case would be:

$scope.close_popup = function(id)
        {
            for(var iii = 0; iii < popups.length; iii++)
            {
                if(id == popups[iii])
                {
                    Array.remove(popups, iii);

                    document.getElementById(id).style.display = "none";

                    $scope.calculate_popups();

                    return;
                }
            }   
        }

But nothing happens, even if I put a console.log in this method does not show me anything, I believe it is because it is created dynamically. How can I fix this?

javascript angularjs

  • Hello Daniel, I think I understand what you’re trying to do in the code above, but unfortunately you’re doing it in the wrong place. The best way for you to dynamically create this element is to create a DIRECTIVE. This way it will be much simpler to pass the HTML template that should be used and also much simpler to "bind" the click on the element. If you create a Plunker or Jsfiddle with the rest of the code I can help you.

2 answers

1

Build your code using $Compile.

var element = $compile("<button type='button' id='btnTeste' ng-click='teste()'>Teste Click</button>")($scope);

0

This happens, why using the .innerHTML you are just linking in html a string code, but you are not "updating/linking" the events with the DOM, for that to happen I suggest the solution below.

Create the directive in your code.

myApp.directive('dynamic', function ($compile) {
  return {
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        if (!html) {
            return;
        }
        ele.html((typeof(html) === 'string') ? html : html.data);
        $compile(ele.contents())(scope);
      });
    }
  };
});

in your html add.

<div data-dynamic="variavel"></div>

In your controller where you are doing.

    var element = '<div class="popup-box chat-popup" id="'+ id +'">';
    element = element + '<div class="popup-head">';
    element = element + '<div class="popup-head-left">'+ name +'</div>';
    element = element + '<div class="popup-head-right"><a href="javascript:;" ng-click="close_popup(\''+ id +'\');">&#10005;</a></div>';
    element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';

    document.getElementById("chat").innerHTML = document.getElementById("chat").innerHTML + element;

substitute for.

        var element = '<div class="popup-box chat-popup" id="'+ id +'">';
        element = element + '<div class="popup-head">';
        element = element + '<div class="popup-head-left">'+ name +'</div>';
        element = element + '<div class="popup-head-right"><a ng-click="close_popup(\''+ id +'\');">&#10005;</a></div>';
        element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';

 $scope.variavel = element;

Browser other questions tagged javascript angularjs

You are not signed in. Login or sign up in order to post.