使用 jQuery 访问 Angular 指令中的元素答案

【问题标题】：Accessing element in an Angular directive with jQuery使用 jQuery 访问 Angular 指令中的元素
【发布时间】：2015-01-21 13:04:38
【问题描述】：

我在嵌套指令中有一个表单（在 Ionic/Angular 项目中）

<ion-content class="scroll-content ionic-scroll  has-header">
  <recipe-form>
    <form id="example-form" action="#" class="ng-pristine ng-valid">
    </form>
  </recipe-form>
<div>

但我无法通过 jQuery 访问它。

我尝试了以下方法但没有成功：

$(function () {
  #$('#example-form')
  #angular.element(document.querySelector('#example-form'))
  #angular.element.find('#example-form') 
  #angular.element.find('example-form')
  #angular.element(document.querySelector('example-form')) 
}

我也找到了several SO的问题，几乎都是用angular.element(document.querySelector(<element id>))语法解决的

但对我来说它给出了一个空白数组[]

我在 head 部分和 jQuery 之后加载我的 js 文件。

更新

但是，我在同一个文件中用于按钮单击的以下方法按预期工作

$( document ).ready(function() {
  $(document).on('click', 'a.next', function(e){
    arr = [];
    arr = $('.card.recipe-slider');
    current_card = $(this).closest('.card')[0];
    id = current_card.dataset.id;

    if (validateInput(current_card)){
      $(arr[id]).addClass('active');
      $(current_card).removeClass('active');
    } else {
    }

  })

});

【问题讨论】：

将脚本放在body的底部是否有效？
$(function () { ... } 位于何处，何时执行？
@rwacarter，抱歉回复晚了，不..它不起作用;(。
我的猜测是你试图在元素实际存在于 DOM 之前找到它。
@tasseKATT，嗨，它在一个单独的 js 文件中，并在页面加载时加载。（我用 chrome 终端检查过）

标签： javascript jquery angularjs angularjs-directive ionic-framework

【解决方案1】：

我终于找到了我的问题的解决方案。我遗漏的要点是，您不能通过指令中的JQuery 直接访问form 元素。

因此，在@tasseKATT 的出色帮助和以下article 的帮助下，我能够让它运行

以下是我的最终代码（我试图添加 Jquery steps 插件）

angular.module('directive.recipeForm',[])
  .directive('recipeForm', function(){
    return {
       restrict: 'E',
       scope: false,
       link: function(scope, element){
         var form = $("#example-form");
         form.children("div").steps({
           headerTag: "h3",
           bodyTag: "section",
           transitionEffect: "slideLeft",
           onStepChanging: function (event, currentIndex, newIndex)
           {

           },
           onFinishing: function (event, currentIndex)
           {

           },
           onFinished: function (event, currentIndex)
           {

           }
         });
       },
       controller: 'newRecipeCtrl',
       templateUrl: 'templates/directives/recipe_form.html'
    }
  });

【讨论】：