CODEWITHSUNDEEP
angularjs
Ajith
Ajith

Reputation: 393

Angular js directive not compiled data scope

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>'
  };
  });
})();

Upvotes: 1

Views: 44

Answers (1)

Szabolcs D&#233;zsi
Szabolcs D&#233;zsi

Reputation: 8843

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.

Upvotes: 1

Related Questions