Question

我有以下JS / jQuery代码：

window.isTouchDevice = 'ontouchstart' in document.documentElement;

$(document).ready(function(){
    if(window.isTouchDevice === false){
        $('.overlay').removeClass('touch-placeholder');
        $('.button-planes').remove();
        $('.button-cars').remove();
    }
});

删除'touch-placeholder'类的回调函数的第一行有效。接下来两次调用jQuery'remove'方法没有。如果我在页面加载后在浏览器控制台中运行这两行中的任何一行，则会从DOM中正确删除这些元素。

我正在运行JS的HTML如下所示：

<div class="myClass" ng-repeat="item in itemsContainer">
     <div class = 'touch-placeholder some-class'></div>
     <a href = '#' class = 'button-planes' ng-click = 'someFunction($index)'>
     <a href = '#' class = 'button-cars' ng-click = 'someFunction($index)'>
</div>

HTML绑定到Angular'itementsContainer'数组，并根据数组的长度呈现DIV。我在jQuery'remove'方法之间设置了警报中断，并注意到即使我使用$(document).ready，结果的HTML仍未呈现。

当我想删除的项目使用Angular的数据绑定函数渲染时，在此实例中删除我的锚元素的最佳方法是什么？

Answer 1

如果你真的想删除你想要使用的ngIf

的DOM元素

我在$ rootScope上放置一个像isTouchEnabled这样的变量，然后使用ng-if =＆＃34;！isTouchEnabled＆＃34;在您要删除的元素上

Answer 2

我通过创建自定义指令解决了这个问题：

myModelApp.directive('onFinishRender', function($timeout){
        return function(scope, element, attrs){
            var isTouchDevice = 'ontouchstart' in document.documentElement;
            //After last item is rendered, do the enclosed things
            if(scope.$last && isTouchDevice === true){
                $('.overlay').removeClass('touch-placeholder');
                $('.button-planes').remove();
                $('.button-cars').remove();
                //Other things you want to do  
            }
        }
    }
});

将指令添加到HTML中：

<!--Notice the camal-cased JavaScript name being transformed into one 
with dashes-->

<div class="myClass" ng-repeat="item in itemsContainer" on-finish-render>

在Angular的数据绑定中使用jQuery Remove（）方法

2 个答案: