AngularJS + jQuery的 - 无法隐藏/显示元素内部指令

我有我的网页上显示的元素 - 这个元素是Twitter的引导图标 -
<i class="icon-trash"></i>。AngularJS + jQuery的 - 无法隐藏/显示元素内部指令

页面加载时，图标通过与风格将隐藏的类，它隐藏：

.hidden { 
    display: none; 
}

现在，我已经创建了一个指令，它以最简单的形式如下：

var app = angular.module('testApp', []); 

app.directive('testDir', function() { 
    return function(scope, iElement, iAttrs) { 
     iElement.customMethod({ 
      source: function() { 
       //Some other statements 
       jQuery(".icon-trash").removeClass('hidden'); 
      } 
     }); 
    }; 
});

该指令作为属性放置在输入框中。当用户输入一个输入文本时，指令函数确实被调用。但是，图标从不再显示，即使调用该函数（使用console.log()进行检查），jQuery代码似乎也不会删除隐藏的类。任何想法为什么？

来源

2013-04-11 user109187

我想你应该阅读http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background/14994393#14994393 和考虑使用ng-class而不是写一个复杂的指令？ – ganaraj

尝试'$（'。icon-trash'）。show（）;' – Omar

'.show（）'将图标的'display'属性设置为'display：inline'。实际的显示属性应该是'display：inline-block'，因为图标不会被渲染。因此，我需要添加和删除类将设置显示'none' – user109187

解决方案1：的jQuery - .show（）和.hide（）。只要你想

隐藏它pageshow

$('.icon-trash').hide()

表现出来。

$('.icon-trash').hide()

解决方案2：创建两个类，添加/删除它们。

.hide-me { display: none !important;} 

.show-me { display: inline-block !important; } 

$('.icon-trash').removeClass('hide-me').addClass('show-me');

解决方案3：脏直接的方式

$('.icon-trash').attr('style', 'display: inline-block !important;')

来源

2013-04-12 08:19:32 Omar

解决方案＃2工作 - 这次我不必添加'！important' – user109187

此代码使用ng-show指令显示带有垃圾图标的按钮。每当字段搜索被设置为某事，即：用户在输入文本中输入了某些内容。否则，如果文本被删除，该按钮将被再次隐藏。

<input type="text" ng-model="search" /> 
<button class="btn" ng-show="search" ng-click="trash()"> 
    <i class="icon-trash"></i> button 
</button>

当点击按钮时，垃圾函数被调用。

app.controller('HomeController', ['$scope', function($scope) { 
    $scope.search = undefined; 

    $scope.trash = function() { 
     console.log('clicked: trash button'); 
    }; 
}]);

来源

2013-04-11 23:08:40 jpmorin

也许它可以在角指令隐藏/显示帮助。 Jquery必须在html之前包含在内，并且巡视将按预期工作。

来源

2014-10-20 09:10:03

AngularJS + jQuery的 - 无法隐藏/显示元素内部指令

回答

相关问题