jQuery 没有 select 具有动态 ID 的元素，怎么办？

Question

我在通过指令传递 ID 时遇到问题。我无法在 Link 函数中使用 jQuery 获取元素，并且该元素使用正确的动态 ID 作为参数：

指令：

(function(angular) {
  var app = angular.module('pi.core');
  app.directive('piSearch', function() {
    return {
      restrict: 'E',
      transclude: true,
      replace: true,
      scope: {  
        idelement: '@'
      },
      link: function(scope, element, attrs, controller, transcludeFn) {
        var idelement = scope.idelement;

        console.log('idElement: ' + idelement);
        console.log($('#' + idelement + ' .typeahead'));
      },
      template: '<div id="{{idelement}}"></div>'
    };
  });
})(angular);

      var myApp = angular.module('piCore', []);

      myApp.directive("piSearch", function() {
        return {
          restrict: 'E',
          transclude: true,
          replace: true,
          scope: {  
            idelement: '@'
          },
          link: function(scope, element, attrs, controller, transcludeFn) {
            var idelement = scope.idelement;
  
  scope.elementSelected = $('#' + idelement + ' .typeahead');
            console.log('idElement: ' + idelement);
            console.log($('#' + idelement + ' .typeahead'));
          },
          template: '<div id="{{idelement}}"></div>'
        };
      });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body ng-app="piCore">
<pi-search></pi-search>
{{$scope.elementSelected}}
</body>

有什么提示吗？预先感谢您的帮助！

Answer 1

关于全局中的动态 ID 和元素，您必须了解的一件事：

1) 首先你必须在 javascript

中生成你的动态 HTML

2) 将其打印、追加或仅插入 DOM

中的某处

3) 现在要访问该新元素，您必须使用 document 来读取该新元素，如下所示：

document.getElementById('new-generic-id');

或

$(document).on('click touchstart select', '#new-generic-id', function(){});

希望你明白。

Answer 2

尝试使用angular.element("#"+ idelement);

并确保此 template: '<div id="{{idelement}}"></div>' 不会多次生成

Answer 3

我会重构你的 link 函数，记住 angular 有自己的生命周期，你需要确保你的模板在你的模型有值时编译，将你的逻辑包装在一只手表

 app.directive('piSearch', function() {
    return {
      restrict: 'E',
      transclude: true,
      replace: true,
      scope: {  
        idelement: '@'
      },
      link: function(scope, element, attrs, controller, transcludeFn) {
        var idelement = scope.idelement;
        scope.$watch('idelement',function(){
            scope.elementSelected = $('#' + idelement + ' .typeahead');
            console.log('idElement: ' + idelement);
            console.log($('#' + idelement + ' .typeahead'));
         });
      },
      template: '<div id="{{idelement}}"></div>'
    };
  });

jQuery 没有 select 具有动态 ID 的元素，怎么办？

jQuery doesn't select the element with dynamic ID, how to do that?

javascript

jquery

angularjs

angularjs-directive