CODEWITHSUNDEEP
angularjsangularjs-directive
J Castillo
J Castillo

Reputation: 3357

Can't invoke function inside Directive in Angular 1.2

I have an isolated scope directive that is called when I click on a button, this directive passes all the scope attrs to a element.bind('click' that opens a fancybox (to show a modal), the problem am having is when fancybox opens and a link is clicked, if I put a onclick event on that anchor, it never fires, it says the function is undefined even though is right there within the directive definition. I don't get it, what is wrong??

Here is an example:

search.directive('popup', [ function () {
 return {
  scope: {
   content: '@',
   expiration: '@',
   instructions: '@'
  },
 restrict: 'A',
 controller: function($scope, $element) {

 function hello() {
    alert('hello richie');
  }

var attr = '<a onclick="hello();" href="google.com">' + $scope.content + '</a>';


  $element.bind('click', function() {
    $.fancybox.open({
      modal     : false,
      maxWidth  : 800,
      maxHeight : 600,
      fitToView : false,
      autoSize  : true,
      content: attr,
      closeClick  : false,
      openEffect  : 'none',
      closeEffect : 'none',
      helpers: {
        overlay: {
          locked: false
        }
      },
      tpl : {
       closeBtn : '<button type="button" class="fancybox-item fancybox-close close my-own-close">×</button>'
      }   
    });
  });

Upvotes: 0

Views: 222

Answers (1)

Bryant
Bryant

Reputation: 8670

I'm not familiar with the fancybox class you're using, but I'm guessing you'll need to call $compile on your html prior to setting it as the content, otherwise it is just raw HTML and it will have no angular context. So it will be looking for a global function called hello() which doesn't exist.

Upvotes: 0

Related Questions