ng-click Does not work with dynamically created elements

Question

ng-click Does not work with dynamically created elements

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

Good evening 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 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 another method, which in this case would be this:

$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;
                }
            }   
        }

Only nothing happens, even if I put a console.log in this method does not appear anything, I believe it is because it is created dynamically. How can I resolve this?

javascript angularjs

asked by anonymous 09.05.2015 / 02:33

2 answers

How to show a jPopupMenu just below a jTextfield? EntityFramework complaining of duplicate identifier even with property being null

score 1 · Answer 1

1

Mount your code using $ compile.

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

28.05.2015 / 21:09

score 0 · Answer 2

This happens, because using .innerHTML you are only linking in html a string code, but you are not "updating / linking" events with the DOM, so I suggest the following solution.

Create the policy 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;

Replace with.

        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;