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

最后，我能够找到问题的解决方案。我遗漏的主要观点是，您无法通过指令内的form直接访问JQuery元素。

所以在@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指令中的元素

1 个答案: