Question

这里我试图在rightClick上显示数据。我为此创建了一个指令。但是数据没有正确绑定，它显示为{{data}}。如何克服这个

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

Answer 1

我对你的小提琴进行了一些修改：

删除ngTransclude无论如何它似乎无能为力。顺便说一句，当用作属性时，它应该是ng-transclude。
在contextmenu事件中添加了行$("#ibacontextmenu").remove();作为删除现有上下文菜单的第一个语句。
我没有编译该硬编码字符串，而是将scope.template传递给$compile服务。
在追加已编译的DOM元素之后$scope.$apply。

JSFiddle可用here。

Angular js指令没有编译数据范围

1 个答案: