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

Question

我在嵌套指令中有一个表单（在 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 {
    }

  })

});

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

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

Accessing element in an Angular directive with jQuery

javascript

jquery

angularjs

angularjs-directive

ionic-framework