Angular js directive not compiled data scope

Question

Here I am trying to show data on rightClick . I created a directive for that. but data was not bind correctly it shows like {{data}} . How can overcome this

jsFiddle

(function() {
   var app = angular.module('right', []);
   app.controller('rightController', function($scope) {
$scope.template = "<div id='ibacontextmenu' ng-click='click()' temp    ngTransclude></div>";
$scope.name = 'ajith';
$scope.desc = 'Hello';
$scope.click = function() {
  alert('clicked');
}
  });
       app.directive('ibaRightMouseDown', function($compile) {

ibaRightMouseDown = {};
ibaRightMouseDown.restrict= 'AE';

 ibaRightMouseDown.ngModel={};
ibaRightMouseDown.link= function(scope, elem, attr) {
//scope.desc=ngModel;
  elem.on('contextmenu', function(e) {
    e.preventDefault();
    //scope.desc=scope.ibaRightMouseDown;

    //scope.desc=scope.ngModel;
    debugger;
    scope.$apply();
   elem.append($compile("<div id='ibacontextmenu' ng-click='click()' temp></div>")(scope));
    $("#ibacontextmenu").css("left", e.clientX);
    $("#ibacontextmenu").css("top", e.clientY);
  });
  elem.on("mouseleave", function(e) {

    $("#ibacontextmenu").remove();

    debugger;
  });
};
return ibaRightMouseDown;
  });
  app.directive('temp',function(){
  return{
 restrict:'A',
  transclue:true,
  template:'<div >{{desc}}</div>'
  };
  });
})();

Szabolcs Dézsi · Accepted Answer · 2016-02-27 08:16:05Z

1

I made some changes to your fiddle:

Removed ngTransclude it doesn't seem to do anything anyway. By the way it should be ng-transclude when used as an attribute.
On the contextmenu event added the line $("#ibacontextmenu").remove(); as the first statement to remove existing context menus.
Instead of compiling that hard coded string, I passed scope.template into the $compile service.
Did $scope.$apply after appending the compiled DOM elements.

JSFiddle available here.

answered Feb 27, 2016 at 8:16

Szabolcs Dézsi

8,84323 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Angular js directive not compiled data scope

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related