参考Javascript中AngularJs指令的生成

Reference the production of an AngularJs Directive in Javascript

本文关键字：指令 AngularJs Javascript 参考      更新时间：2023-11-02

这就是场景。

我的Html 中有指令

<div class="row xsResponse" id="productGrid">
  <product product="product" ng-repeat="product in products"></product>
</div>

那个产品有点像

<div class="product">
  <!-- ... -->
</div>

在同一个页面中，我有一个Javascript，它必须引用#productGrid中的所有.product（class），就像这个一样

document.querySelectorAll( '#productGrid .product' )).forEach( function( el ) {
  //.......
}

问题是Javascript只能看到<product ...></product>标记，而不能看到他的产品。有没有一种方法可以在ng重复之后调用Javascript？

很抱歉，如果这个问题看起来不那么干净，也很抱歉我的英语不好。谢谢你的建议。

编辑

为了便于说明，这里有javascript代码。

<script>
        (function() {
            var body = document.body,
                dropArea = document.getElementById( 'drop-area' ),
                droppableArr = [], dropAreaTimeout;
            // initialize droppables
            [].slice.call( document.querySelectorAll( '#drop-area .drop-area__item' )).forEach( function( el ) {
                droppableArr.push( new Droppable( el, {
                    onDrop : function( instance, draggableEl ) {
                        // show checkmark inside the droppabe element
                        classie.add( instance.el, 'drop-feedback' );
                        clearTimeout( instance.checkmarkTimeout );
                        instance.checkmarkTimeout = setTimeout( function() { 
                            classie.remove( instance.el, 'drop-feedback' );
                        }, 800 );
                        // ...
                    }
                } ) );
            } );
            // initialize draggable(s)
            [].slice.call(document.querySelectorAll( '#grid .product' )).forEach( function( el ) {
                new Draggable( el, droppableArr, {
                    draggabilly : { containment: document.body },
                    onStart : function() {
                        // clear timeout: dropAreaTimeout (toggle drop area)
                        clearTimeout( dropAreaTimeout );
                        // show dropArea
                        classie.add( dropArea, 'show' );
                    },
                    onEnd : function( wasDropped ) {
                        var afterDropFn = function() {
                            // hide dropArea
                            classie.remove( dropArea, 'show' );
                        };
                        if( !wasDropped ) {
                            afterDropFn();
                        }
                        else {
                            // after some time hide drop area and remove class 'drag-active' from body
                            clearTimeout( dropAreaTimeout );
                            dropAreaTimeout = setTimeout( afterDropFn, 400 );
                        }
                    }
                } );
            } );
        })();
    </script>

当尝试混合jQuery和Angular时，这是一个常见的问题。jQuery代码将在angular添加元素之前运行。运行jQuery代码后添加的任何元素都不会得到处理。解决方案是自定义指令。一个简单的例子是：

.directive('product', function() {
   return {
      restrict: 'C',
      link: function(scope, el, attr) {
          //el is a jQuery object (assuming you've included jQuery)
          //you can run your custom jQuery logic on the element here
   };
})

该指令的链接函数将为每个具有class="product"的元素调用。

它在功能上相当于：

document.querySelectorAll( '.product' )).forEach( function( el ) {
  //.......
});

除了作为一个指令，它将被调用，即使是后来添加的元素（只要它们是按角度添加的）。

相关文章：