Angular js指令不能編譯數據範圍

Question

這裏我試圖在rightClick上顯示數據。我爲此創建了一個指令。但數據未正確綁定，它顯示爲{{data}}。怎樣才能克服這個

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

Answer 1

我做了一些更改您的提琴：

• 刪除ngTransclude它似乎並沒有無論如何做任何事情。順便說一句，它應該是ng-transclude當作爲一個屬性使用。

• 在contextmenu事件中添加行$("#ibacontextmenu").remove();作爲刪除現有上下文菜單的第一條語句。

• 而不是編譯該硬編碼的字符串，我通過scope.template到$compile服務。

• 在追加編譯的DOM元素之後做了$scope.$apply。

JSFiddle available here。