2017-08-04 28 views
-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=xxxng-click=xxx为了留在角的世界,但不工作(我的关键字无法点击,当我做那)。

我有jQuery代码,将点击事件绑定到class=glossaryLookup的元素。当我点击关键字时,它目前显示一条警告。

我不知道如何获得该点击来显示角度模式对话框。我希望它使用角度模式对话框,因为有相同的应用程序的另一部分,已经显示角度模式对话框,我想要一致

因此,简而言之...服务器提供一个字符串包含一个或给浏览器分配更多的单词。我希望浏览器上的angular/js/jquery代码不仅突出显示分隔的单词,还允许我点击它们,查找定义(我不关心如何查找定义,至少还没有),并在$uibModal中显示该定义。

感谢您的任何帮助。

+0

我想我其实已经想通了。我创建了一个dummydiv并给了它一个id(id = dummydiv)。我“分配”一个控制器到该div(ng-controller = dummyCtrl)。在将click事件绑定到我的关键字的jQuery代码中,我使用以下代码行来获取虚拟控制器中的方法: –

回答

0

我想我其实已经想通了。我创建了一个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 
     }); 
    }; 
});` 
相关问题