Question

I am new to AngularJS. I have been developing a site that displays a list. Each element in the list is a delivered from the server as a string. Within each element I use bars as delimeters for keywords that I'd like the user to be able to click on (i.e. this is a |keyword| in this element).

I use a controller/filter to create html to remove the delimiters and make the keywords red (using a class). So the html looks ends up looking like this:

<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>

I tried having the filter also generate ng-controller=xxx and ng-click=xxx in order to stay in the angular world but that doesn't work (my keyword is not clickable when I do that).

I DO have jQuery code that binds the click event to the elements with class=glossaryLookup. It currently displays an alert when I click on the keyword.

I am at a loss as to how to get that click to display an angular modal dialog. I want it to use an angular modal dialog because there is another part of the same application that already displays an angular modal dialog and I want to be consistent

So, in short... the server delivers a string containing one or more delimited words to the browser. I'd like the angular/js/jquery code on the browser to not only highlight the delimited word(s) but allow me to click on them, look up a definition (I am not concerned about how to look up the definition, at least not yet) and display that definition in a $uibModal.

Thanks for any help.

Answer 1

I think I actually figured it out. I created a dummydiv and gave it an id (id=dummydiv). I "assign" a controller to that div (ng-controller=dummyCtrl).

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

In the jQuery code that binds the click event to my keyword I use this line of code to run the function in the dummy controller that displays the dialog:

`$(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 - the dummy controller looks like this:

`//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
        });
    };
});`

How do I dynamically create clickable keywords that display a modal (uibModal) dialog in AngularJS

1 个答案: