在Javascript中引用AngularJs指令的生成

情况就是这样

我的Html中有一个指令

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

问题是Javascript只能看到

标记，而不能看到他的产品。 有没有一种方法可以在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>

（功能（）{
var body=document.body，
dropArea=document.getElementById（'dropArea'），
DropPaClear=[]，dropAreaTimeout；
//初始化可拖放
[].slice.call（document.querySelectorAll（'#drop-area.drop-area_u-item'））.forEach（函数（el）{
升降器推动器（新升降器（el{
onDrop:函数（实例，DragTableel）{
//在droppabe元素内显示复选标记
classie.add（instance.el，'drop feedback'）；
clearTimeout（instance.checkmarkTimeout）；
instance.checkmarkTimeout=setTimeout（函数（）{
classie.remove（instance.el，'drop feedback'）；
}, 800 );
// ...
}
} ) );
} );
//初始化可拖动的
[].slice.call（document.querySelectorAll（“#grid.product”）.forEach（函数（el）{
新型可拖动（el、升降式清污器、{
可拖动：{containment:document.body}，
onStart:function（）{
//清除超时：dropAreaTimeout（切换放置区域）
clearTimeout（dropAreaTimeout）；
//展示区
添加类别（dropArea，'显示'）；
},
onEnd：函数（wasdroped）{
var afterDropFn=函数（）{
//隐藏放置区
类别。移除（放置区域，“显示”）；
};
如果（！已删除）{
后降fn（）；
}
否则{
//一段时间后，隐藏放置区域并从主体中删除类“拖动活动”
clearTimeout（dropAreaTimeout）；
dropAreaTimeout=setTimeout（afterDropFn，400）；
}
}
} );
} );
})();

在尝试混合使用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”的每个元素，都将调用此指令的link函数

它的功能相当于：

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

---

除了作为一个指令，它会被调用，即使是以后添加的元素（只要它们是通过angular添加的）。

u可以使用$timeout，但我不明白为什么不从指令中启动所需的内容itself@Oxenarf通过“有一种方法可以在ng重复之后调用Javascript？”你的意思是说你想在ng repeat完成渲染后收到通知吗？@amitthk我想在ng repeat结束时启动javascript，因为当它启动时，它只找到标记，而没有生成it@Oxenarf好啊我觉得你的是Angularjs和jQuery的混合，最好用Angularjs自己来做。此外，在ng repeat完成后，您可以始终使用ng repeat的

$scope.$last

属性链接来绑定您的操作。您的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
   };
})

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