我如何動態創建在AngularJS中顯示模態（uibModal）對話框的可點擊關鍵字

-1

我是AngularJS的新手。我一直在開發一個顯示列表的網站。列表中的每個元素都是作爲字符串從服務器傳遞的。在每個元素中，我使用bars作爲關鍵字的分隔符，我希望用戶能夠點擊它（即，這是此元素中的| keyword |）。我如何動態創建在AngularJS中顯示模態（uibModal）對話框的可點擊關鍵字

我使用控制器/過濾器來創建html來刪除分隔符並將關鍵字設爲紅色（使用類）。因此，HTML看起來最終看起來像這樣：

<span ng-controller="formatForGlossaryAndCodeTextCtrl" class="ng-scope"> 
    <span ng-bind-html="formattedLineItem" class="ng-binding"> 
     this is a 
     <span class="glossaryLookup" >keyword</span> <!--here is my keyword--> 
     in this element 
    </span> 
</span>

我試圖具有過濾器也產生ng-controller=xxx和ng-click=xxx爲了留在角的世界，但不工作（我的關鍵字無法點擊，當我做那）。

我有jQuery代碼，將點擊事件綁定到class=glossaryLookup的元素。當我點擊關鍵字時，它目前顯示一條警告。

我不知道如何獲得該點擊來顯示角度模式對話框。我希望它使用角度模式對話框，因爲有相同的應用程序的另一部分，已經顯示角度模式對話框，我想要一致

因此，簡而言之...服務器提供一個字符串包含一個或給瀏覽器分配更多的單詞。我希望瀏覽器上的angular/js/jquery代碼不僅突出顯示分隔的單詞，還允許我點擊它們，查找定義（我不關心如何查找定義，至少還沒有），並在$uibModal中顯示該定義。

感謝您的任何幫助。

來源

2017-08-04 Frank Gualtieri

我想我其實已經想通了。我創建了一個dummydiv並給了它一個id（id = dummydiv）。我「分配」一個控制器到該div（ng-controller = dummyCtrl）。在將click事件綁定到我的關鍵字的jQuery代碼中，我使用以下代碼行來獲取虛擬控制器中的方法： –

我想我其實已經想通了。我創建了一個dummydiv並給了它一個id（id = dummydiv）。我「分配」一個控制器到該div（ng-controller = dummyCtrl）。

`<div id=dummydiv ng-controller=dummyCtrl></div>`

在結合的Click事件給我的關鍵字我用這行代碼運行在顯示的對話框中的虛擬控制器的功能jQuery代碼：

`$(document).ready(function() { 
    $(document) 
     .on("click", ".glossaryLookup", "NEED TO LOOKUP IN GLOSSARY", function (x) { 
      angular.element($("#dummydiv")).scope().testclick(); 
     }) 
     .on("click", ".codeTextLookup", "NEED TO LOOKUP CODE TEXT", function (x) { 
      alert(x.data) 
     }) 
});`

BTW - 虛擬控制器看起來像這樣：

`//DUMMY CONTROLLER TO TEST DYNAMIC CLICK 
Hydroware_Checkbox_List_Prototype_App.controller('dummyCtrl', function ($scope, $uibModal) { 
    $scope.testclick = function() { 
     alert("I WAS CLICKED BUDDY"); 
     var modalInstance = $uibModal.open({ 
      templateUrl: 'line_item_help.html', 
      controller: "LineItemHelpDialogCtrl", 
      scope: $scope 
     }); 
    }; 
});`

來源

2017-08-04 13:05:48

我如何動態創建在AngularJS中顯示模態（uibModal）對話框的可點擊關鍵字

回答

相關問題