2017-02-23 60 views
0

我正在使用daypilot調度程序,我想在彈出的單擊時顯示事件的詳細信息。如何獲取1個事件的一些信息並在popup中設置?無法用ng-repeat在彈出窗口中顯示內容?

screenshot

$scope.schedulerConfig.onEventClicked = function(args){ 
 
    var dp = $scope.scheduler; 
 
    var modal = new DayPilot.Modal({ 
 
    onClosed: function(args) { 
 
     if (args.result) { 
 
     loadEvents(); 
 
     } 
 
     //else console.log("error"); 
 
     dp.clearSelection(); 
 
    } 
 
}); 
 
modal.showHtml("<h1>Details</h1><div ng-repeat='event in events' ng- 
 
       if='event.id == 1490'><div >{{ event.id }}</div><div >{{ event.text }}</div> 
 
       <div >{{ event.start }}</div> <div >{{ event.end }}</div><div >{{ event.resource }}</div></div>"); 
 
}

回答

1

您在模態對話框顯示HTML從未被角編譯。因此,除了您提供的純文本外,不會顯示任何內容。您需要讓Angular先使用合適的範圍編譯模板。之後,您可以顯示編譯的HTML。更多信息請參見該角文檔上$compile

更新:

試試這個代碼

var html = "<h1>Details</h1> ..."; 
var modalTemplateCompiler = $compile(html) 
var modalContent = modalTemplateCompiler($scope) 
$scope.$digest() 
modal.showHtml(modalContent[0]) 

此代碼是未經測試。您還需要將$compile注入您的控制器。此外,這可能會導致摘要錯誤。在這種情況下,你必須創建一個新的範圍,並通過你需要的所有屬性來擴展它。

var modalScope = $scope.$new() 
// Use Lodash library here to extend the new scope 
_.extend(modalScope, $scope) 
var html = "<h1>Details</h1> ..."; 
var modalTemplateCompiler = $compile(html) 
var modalContent = modalTemplateCompiler(modalScope) 
modalScope.$digest() 
modal.showHtml(modalContent[0]) 

這段代碼的作用是創建一個新的作用域,並通過編譯模板所需的屬性擴展它。然後它會根據您提供的HTML生成一個編譯功能。它返回一個我們可以傳遞範圍的函數。然後使用提供的範圍編譯HTML。在最後一步中,摘要被觸發並且模板準備好顯示。

我總是建議在這個版本上使用指令,但我不知道DayPilot庫。

+0

感謝您的回答,我試圖使用modal.showUrl(「eventClicked.html」);但有錯誤:未捕獲錯誤:[$ injector:modulerr] !! – Fredj