Jquery имеет / найти / содержит не работает

0

Я проверяю, содержит ли элемент второй элемент. Раньше я использовал функцию jquery element.has(secondElement).

Я использую jquery в angularjs. У меня есть директива, что я перейду элемент через разметку, используя ng-transclude.

Отметить:

Изображение 174551

Применение:

<drop-down
            options="data"
            value="val"
            placeholder="I am split"
            type="split">
        <icon size="medium" name="search-grey"></icon>
    </drop-down>

Сначала мой исходный код для директивы:

    "use strict";

var DropDownDirectiveDefinition = [
    "Popover",
    function (Popover) {
        return {
            restrict: "E",
            transclude: true,
            templateUrl: "js/modules/components/dropDown/dropDown.html",
            scope: {
                data: "=",
                value: "=",
                placeholder: "@"
            },
            link: function (scope, element, attrs, ctrl, transclude) {
                transclude(scope, function(clone) {
                    scope.transcludedData = clone;
                });
                scope.CheckData = function(event) {
                        if(scope.transcludedData.find(event.target).length > 0) {
                            console.log("Element found!");
                            return;
                        }
                };
            }
        };
    }];

angular
    .module("rpsm")
    .directive("dropDown", DropDownDirectiveDefinition)
;

У меня есть функция ссылок в моей директиве. Я использую ng-transclude, и я захватил transcluded элемент в scope.transcludedData.

В директиве у меня есть ng-click. На клик я вызываю checkData, и я передаю $ event.

Я хочу проверить, находится ли event.target внутри переданных данных.

Это дамп трансключенного элемента и цели:

Заключенный элемент: Изображение 174551

Цель:

Изображение 174551

Теперь я вижу, что трагедия находится в транслируемом элементе: Изображение 174551

Однако.has(),.find() и.contains() все возвращают false.

Это отлично работает, когда я не проверяю использование элемента transcluded.

Поэтому мой вопрос: почему jquery find/has/содержит функцию, не возвращающую true? Может ли кто-нибудь помочь в решении этой проблемы? Функция transclude break jquery содержит функцию? Кстати, у меня нет ошибок.

Любая помощь приветствуется. благодаря

  • 0
    можешь поделиться кодом для директивы
  • 0
    @ArunPJohny Обновил мой вопрос с полным источником директивы
Показать ещё 5 комментариев
Теги:

2 ответа

1
Лучший ответ

Вызов метода transclude() создает новый элемент dom, он не возвращает тот же элемент, созданный ng-transclude поэтому фактический элемент, добавленный в dom, и тот, который указан transcludedData, различен, поэтому он не работает.

Таким образом, одним из простых решений является наличие элемента оболочки для переводимых элементов, таких как

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  $scope.message = "Welcome";
});
app.directive('myTest', function() {
  return {
    restrict: "E",
    transclude: true,
    scope: {
      data: "=",
      value: "=",
      placeholder: "@"
    },
    link: function(scope, element, attrs, ctrl) {
      scope.CheckData = function(event) {
        if (element.find('> div > .trans-el').find(event.target).length) {
          snippet.log("Element found!");
          return;
        }
      };
    },
    template: '<div ng-click="CheckData($event)"><div class="trans-el"><ng-transclude></ng-transclude></div>{{value}}<span>x</span></div>'
  }
});
<!-- Provides the 'snippet' object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<div ng-app="my-app" ng-controller="AppController">
  <my-test>Some content <span>with span</span></my-test>
</div>
Поделиться
  • 0
    jsfiddle.net/arunpjohny/6gcxd3ks
  • 0
    Спасибо, упаковка включенных данных сделала свое дело!
1

Если вы не хотите добавлять элемент оболочки, тогда другое решение не должно использовать директиву ng-transclude вместо этого, чтобы добавить перемещенный элемент вручную в dom, как

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  $scope.message = "Welcome";
});
app.directive('myTest', function() {
  return {
    restrict: "E",
    transclude: true,
    scope: {
      data: "=",
      value: "=",
      placeholder: "@"
    },
    link: function(scope, element, attrs, ctrl, transclude) {
      transclude(scope, function(clone) {
        scope.transcludedData = clone;
        element.children('div').prepend(clone)
      });
      scope.CheckData = function(event) {
        if (scope.transcludedData.is(event.target) || scope.transcludedData.find(event.target).length > 0) {
          snippet.log("Element found!");
          return;
        }
      };
    },
    template: '<div ng-click="CheckData($event)">{{value}}<span>x</span></div>'
  }
});
<!-- Provides the 'snippet' object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<div ng-app="my-app" ng-controller="AppController">
  <my-test>Some content <span>with span</span></my-test>
</div>

Функции пересылки

Если вы просто используете ngTransclude, вам не нужно беспокоиться об этой функции, так как ngTransclude будет заниматься этим для нас.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню