Angular module on dynamically created elements

Question

i have a existing controller and template:

<div id="outputTableforApp" ng-controller="OutputTableModelCtrl">
    <div id ="outputtablemodel_panel" ng-show="editMode">
    </div>
</div>

it works perfectly. But now i need to delete the template from the project (which has a fix place in the DOM) and somehow make it appear dynamically when man a button click. when i tried that with jQuery

$('<div id="outputTableforApp" ng-controller="OutputTableModelCtrl"><div id ="outputtablemodel_panel" ng-show="editMode">\n\
</div></div>').appendTo($('#div1'));

My Angular module didn't work at all. So i guess i need to register the module somehow again every time when someone presses the button, is that the case ? if so ,how could i do it ?

Don't mix jQuery and angular like that. Recommended reading: Thinking in Angular if I have a jQuery background — doldt
– doldt, Commented Jul 28, 2015 at 14:40

cbender · Accepted Answer · 2015-07-28 15:07:47Z

1

You can use ng-show so do this:

<div id="outputTableforApp" ng-controller="OutputTableModelCtrl" ng-show="showApp">

and when the button is clicked call a function (using ng-click) in your controller script that makes it that showApp is true(make sure you use $scope.showApp in the function).

answered Jul 28, 2015 at 15:07

cbender

2,2611 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tolquito Over a year ago

you mean like that after adding ng-show="showApp"? angular.element($('#outputTableforApp')).scope().showApp=true;

cbender Over a year ago

I was thinking

angular.module('AppName', []).controller('OutputTableModelCtrl' , function($scope){$scope.showDiv=function(){$scope.showApp=true}; });

and in the button add ng-click="showDiv()"

cbender Over a year ago

Also make sure you have showApp set to false when it's loaded so it isn't showing when he page loads. You can do that by putting ng-init="showApp=false" in the top div or you can put $scope.showApp=false; before the $scope.showDiv=function in my previous comment

Collectives™ on Stack Overflow

Angular module on dynamically created elements

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related