0

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 ?

tolquito
  • 91
  • 2
  • 10
  • Don't mix jQuery and angular like that. Recommended reading: [Thinking in Angular if I have a jQuery background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – doldt Jul 28 '15 at 14:40

1 Answers1

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).

cbender
  • 2,231
  • 1
  • 14
  • 18
  • you mean like that after adding ng-show="showApp"? angular.element($('#outputTableforApp')).scope().showApp=true; – tolquito Jul 28 '15 at 15:15
  • 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 Jul 28 '15 at 15:22
  • 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 – cbender Jul 28 '15 at 15:28