1

我有一个在网页上显示的元素 - 这个元素是一个 twitter 引导图标 -
<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');
            }
        });
    };
});

该指令作为属性放置在输入框上。当用户输入输入文本时,指令函数确实被调用。但是,该图标永远不会再次显示,即即使调用了该函数(使用检查),jQuery 代码似乎也没有删除隐藏的类console.log()。知道为什么吗?

4

3 回答 3

2

解决方案 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;')
于 2013-04-12T08:19:32.807 回答
0

此代码使用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-11T23:08:40.973 回答
0

也许在角度指令中隐藏/显示会有所帮助。Jquery 必须在 html 中的 angular 之前包含,并且游览将按预期工作。

于 2014-10-20T09:10:03.700 回答