Question

我正在检查元素是否包含第二个元素。以前我使用过jquery element.has（secondElement）函数。

我在angularjs中使用jquery。我有一个指令，我使用ng-transclude通过标记转换元素。

标记：

用法：

<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是否在转换数据中。

这是transcluded元素和目标的转储：

被剔除的元素：

目标：

现在我可以看到traget在translcuded元素中：

然而.has（）,. find（）和.contains（）都返回false。

当我没有使用transcluded元素进行检查时，这很好用。

所以我的问题是，为什么jquery find / has / contains函数没有返回true？有人可以帮忙解决这个问题吗？ transclude break jquery包含函数吗？顺便说一句，我没有错误。

感谢任何帮助。谢谢

Answer 1

调用transclude()方法会创建一个新的dom元素，它不会返回由ng-transclude创建的相同元素，因此添加到dom的实际元素和transcludedData引用的元素是不同的这就是为什么它不起作用。

因此，一个简单的解决方案是为转换元素设置一个包装元素，如

＆＃13;

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>'
  }
});

＆＃13;

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

＆＃13;

Answer 2

如果你不想添加包装元素，那么另一个解决方案就是不要使用ng-transclude指令来手动将transcluded元素添加到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>

Transclusion Functions

如果您只是使用ngTransclude，那么您无需担心这个功能，因为ngTransclude会为我们处理它。

Jquery有/找不到包含

2 个答案: