Добавлен элемент, скомпилированный и добавленный изнутри, но функция ng-click не работает - PullRequest
Новая
       9

Добавлен элемент, скомпилированный и добавленный изнутри, но функция ng-click не работает

0 голосов
/ 24 октября 2018

По сути, я пытаюсь переопределить щелчок правой кнопкой мыши для определенных элементов и вместо этого отобразить короткое меню, в котором можно выбрать «setClear» или «unsetClear».Если я добавляю пользовательское контекстное меню непосредственно в тело HTML-кода, то оно работает нормально, но я не хочу добавлять его для каждого экземпляра директивы, я бы предпочел, чтобы директива создала и добавила менюСамо по себе, поскольку функция ng-click пропустит переменную, которая будет отличаться в каждом случае.

В настоящий момент правый клик отменяется, и когда я щелкаю правой кнопкой мыши по элементу, я получаю меню.Единственная проблема - когда я делаю выбор, кажется, что функция ng-click не срабатывает, и я не уверен, почему нет.Дело не в том, что он не может найти функцию в контроллере;когда я нажимаю на пункт меню, поведение, которое я вижу, выглядит так, как будто меню вообще не было, и я просто нажимаю на сам ярлык.

Вот HTML-код, в котором директива применяется к метке: 

<label toggle-clear="labelOne" context="labelOne">Label One</label>

Когда я запускаю, если я проверяю элемент, я вижу, что меню есть и что нгвызов по щелчку мыши кажется правильным: 

<label clearToggle="labelOne" context="labelOne">"Label One"
    <ul id="labelOne" class="dropdown-menu">
        <li><a ng-click="setClear(labelOne)">Set to Clear</a></li>
        <li><a ng-click="unsetClear(labelOne)">Unset Clear</a></li>
    </ul>
</label>

Это код директивы: 

angular.module('myApp').directive('toggleClear', function ($parse, $compile) {
    return {
        compile: function(element, attrs) {
            return function(scope, element, attrs) {

            var ulTemplate = "<ul id='"+attrs.context+"' class='dropdown-menu' role='menu'>"+ 
                    "<li><a ng-click='setClear("+attrs.context+")'>Set to Clear</a></li>"+
                    "<li><a ng-click='unsetClear("+attrs.context+")'>Unset Clear</a></li>"+
                    "</ul>"
                $compile(ulTemplate)(scope);
                element.append(ulTemplate);
                var fn = $parse(attrs.ngRightClick);
                element.bind('contextmenu', function(event) {
                    event.preventDefault();
                    fn(scope, {$event:event});
                });
            }
        }
    };
});

(function(angular) {
  var contextMenu = angular.module('directive.toggleClear', []);
  contextMenu.directive('cellHighlight', function() {
      return {
        restrict: 'C',
        link: function postLink(scope, el, attr) {
          el.find('td').mouseover(function() {
            $(this).parent('tr').css('opacity', '0.7');
          }).mouseout(function() {
            $(this).parent('tr').css('opacity', '1.0');
          });
        }
      };
  });

  contextMenu.directive('context', [
      function() {
        return {
          restrict: 'A',
          scope: '@&',
          compile: function compile(contextElement, contextAttrs, transclude) {
            return {
              post: function postLink(scope, elem, attrs, controller) {
                var ul = $('#' + attrs.context),
                end = null;
                ul.css({
                    'display': 'none'
                });
                $(elem).bind('contextmenu', function(event) {
                    event.preventDefault();
                    ul.css({
                      position: 'fixed',
                      display: 'block',
                      left: event.clientX + 'px',
                      top: event.clientY + 'px'
                    });
                    end = event.timeStamp;
                });
            $(document).click(function(event) {
              var target = $(event.target);
              if (!target.is(".popover") && !target.parents().is(".popover")) {
                if (end === event.timeStamp)
                  return;
                ul.css({
                  'display': 'none'
                });
              }
            });
            }
          };
        }
      };
    }
  ])
})(window.angular);

1 Ответ

0 голосов
/ 24 октября 2018

Если какая-то другая душа столкнется с этим во время поиска аналогичного ответа, после долгих раздумий я поняла, в чем я ошиблась.Я сам компилировал ulTemplate, а затем добавлял это к элементу, когда мне действительно нужно было добавить ulTemplate к элементу, а затем скомпилировать element.contents ().Кроме того, я пропускал кавычки вокруг параметра, передаваемого в функцию ng-click.Когда все было сказано и сделано, я закончил с этим: 

        var ulTemplate = "<ul id='"+attrs.context+"' class='dropdown-menu' role='menu'>"+ 
                            "<li><a ng-click='setClear(\""+attrs.context+"\")'>Set to Clear</a></li>"+
                            "<li><a ng-click='unsetClear(\""+attrs.context+"\")'>Unset Clear</a></li>"+
                          "</ul>"
            element.append(ulTemplate);
            $compile(element.contents())(scope);
...