1

ngClick is still not responding even after $compile. The new element is being applied to the DOM and is accessible via jQuery and JS. I assume that the issue is with the range.insertNode function. What am I missing here? Here's my directive:

.directive('selectText', [
    '$rootScope',
    '$compile',
    '$window', 
    function ($rootScope, $compile, $window) {
    return {
        restrict: 'A',
        scope: {
            hlid: "=",
            tu: "="
        },
        link: function (scope, element, attrs) {
            element.on('mouseup', function () {
                //console.log("Attrs: "+JSON.stringify(attrs));
                if ($window.getSelection().toString()) {
                    var text = $window.getSelection().toString();
                    if(text == '') {
                        console.log("No selection");
                        return;
                    }
                    var selection = $window.getSelection();
                    var range = selection.getRangeAt(0);
                    var selectionContents = range.extractContents();
                    var clk = "edSel('hl_"+scope.hlid+"','"+attrs.id+"');";
                    // var span = $compile(angular.element('<hlight id="hl_'+scope.hlid+'" class="cr-pr noselect clickable" title="Text Selection" ng-click="'+clk+'">'+text+'</hlight>'))(scope);
                    var span = angular.element($compile('<hlight id="hl_'+scope.hlid+'" class="cr-pr noselect clickable" title="Text Selection" ng-click="'+clk+'">'+text+'</hlight>')(scope));
                    console.log(span);
                    range.insertNode(span[0]);
                    scope.tu.target = element.html();
                    //selection.removeAllRanges();
                    var arr = {};
                    arr.action = 'add';
                    arr.tuid = attrs.id;
                    arr.hlid = 'hl_'+scope.hlid;
                    arr.content = element.html();
                    scope.$emit('hlChange', arr);
                    scope.hlid++;
                    console.log(element.html());
                    var modal = UIkit.modal("#hl_modal");
                    modal.show();
                }
            });

            scope.edSel = function(id,tuid) {
                console.log('ID: '+id+" - tuID: "+tuid);
            }
        }
    };
}])

Thanks for any help

John Sydnor
  • 21
  • 2
  • can you add https://plunker.co for it? – Arpit Srivastava May 26 '16 at 04:19
  • SOLVED - The issue is not in my directive. In my View I am using ngBindHtml. ng-bind-html does not automatically $compile the container contents so you are left with 2 choices: create a custom directive that renders AND compiles the html or just change the ng-click to onClick and use plain old javascript to forward the event to your controller. Please see: http://stackoverflow.com/questions/22737927/angular-ng-bind-html-filters-out-ng-click. Thanks. – John Sydnor May 27 '16 at 15:30

0 Answers0