Angular directive access template elements from controller

Question

I'm using an angular directive to add a reusable popup to various elements. Due to styling constraints, rather than adding the popover to the element, I need to add it to the document body. I would later like to access it in my controller - how would I go about doing so?

.controller 'slUserCtrl', ($element) ->
   $element.popup
      hoverable: true
      position: 'bottom right'
      popup: # What do I put here to get the "template" DOM element?

.directive 'slUser', ($document) ->
   template = $templateCache.get 'users/sl-user.html'

   return {
      restrict: "A"
      controller: 'slUserCtrl'
      compile: (elem, attrs) ->
         angular.element(document.body).append template
   }

Michael Kang · Accepted Answer · 2015-11-05 07:53:59Z

1

When you want to display a modal popup by attaching it to the document body, you are manipulating the DOM. There is one place where DOM manipulation is Ok, and that's the directive's link function.

var app = angular.module('app',[]);
app.controller('ctrl', function($scope) {
});

app.directive('modal', function() {
  return {
    restrict: 'A',
    transclude: 'element',    
    controller: function($rootScope) {
      $rootScope.dialog = { show: false };
    },
    link: function(scope, element,attr,ctrl, transclude) {      
      transclude(function(clone, scope) {
        scope.$watch('dialog.show', function (val) {
          if (val) {
            clone.css('display', 'block');  
          }
          else {


            clone.css('display', 'none');                
          }
        });
        angular.element(document.body).append(clone);
      });
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  
  <div ng-controller="ctrl">
    Hello World!
    <button ng-click="dialog.show = !dialog.show">Open Modal </button> {{test}}
    <div modal>
         This is a modal dialog
    </div>
  </div>
  
</body>

answered Nov 5, 2015 at 7:53

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

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

1 Comment

Jack Guy Over a year ago

The problem is that I have many of these popups attached to an element with ng-repeat. Is there a way to solve this without rootscope?

Collectives™ on Stack Overflow

Angular directive access template elements from controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related