Question

我有一个我在网页上显示的元素 - 这个元素是一个twitter bootstrap图标 -
<i class="icon-trash"></i>。

当页面加载时，通过使用样式：

将隐藏类应用于它来隐藏图标

.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代码似乎也不会删除隐藏的类。知道为什么吗？

Answer 1

解决方案1： jQuery - .show（）和.hide（）。

将其隐藏在pageshow

上

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

随时显示。

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

解决方案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;')

Answer 2

此代码使用 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');
    };
}]);

Answer 3

也许在angular指令中使用hide / show会有所帮助。必须在html中包含Jquery之前的角度，并且巡视将按预期工作。

AngularJS + jQuery - 无法在指令中隐藏/显示元素

3 个答案: