Question

我有一个带有几个图标的菜单，当我点击其中一个图标时，更改图标，当我再次点击相同的图标时，返回其原始状态，但是如果我点击一个然后我点击另外，第一个图标应该恢复到原始状态，但它没有，我不确定为什么它没有被修改。

HTML就是这样：

<div id="navbar" class="navbar-collapse collapse" ng-controller="customerInformationController">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <menuico linkTo="main" imageDefault="ico_menu_off.png" />
            </li>
            <li>
                <menuico linkTo="customerSearch" imageDefault="ico_search_off.png" />
            </li>
            <li>
                <menuico linkTo="#" imageDefault="ico_user_off.png" />
            </li>
        </ul>
        <img src="img/logo_santander.png" class="logo" />
        <ul class="nav navbar-nav navbar-right">
            <li class="navbar-manager">{{nombreGestor}}</li>
            <li><a ng-click="closeTabs();" class="close-session"><img src="img/ico_closesession.png" /></a></li>
        </ul>
    </div>

我使用AngularJS指令制作此类更改图标。 Angular代码是：

app.directive('menuico', function() {
  return {
    restrict: 'E',
    replace:true,
        scope: {},
    template: '<a href="#{{route}}"><img src="img/{{image}}" /></a>',
    link: function(scope, elem, attrs) {
            var active = false;
            var defaultRoute = "";
            var activeIcon = "ico_close.png";

            scope.image = attrs.imagedefault;
            scope.route = attrs.linkto;
            elem.bind("click", function() {
                active = !active;
                if(active) {
                    scope.route = defaultRoute;
                    scope.image = activeIcon;
                } else {
                    scope.route = attrs.linkto;
                    scope.image = attrs.imagedefault;
                }
            });
    }
  };
});

我需要的是，例如，如果我点击＆＃34; ico_search_off.png＆＃34;，这会更改为＆＃34; ico_close.png＆＃34;，如果我现在点击＆＃ 34; ico_user_off.png＆＃34;，这一个改为＆＃34; ico_close.png＆＃34;并且第一个必须更改为原始状态，即＆＃34; ico_search_off.png＆＃34;，但第一个不会更改并保持当前状态

Answer 1

当您点击另一个时，为什么会改变？它们是具有自己的范围和它们自己的局部变量的不同指令，因此它们不会相互通信。

您需要在指令之间建立某种通信。

我这样做的首选方法是将click事件绑定到$ document，每次点击页面时都会触发该文件（任何地方）。然后，此事件可以触发$ rootscope上的事件触发，告诉所有菜单项自行重置。唯一棘手的一点是你需要检查被点击的event.target而不是关闭你想要打开的那个。

另一个（可能更好的）解决方案是编写一个角度服务并将其注入到您的指令中，该指令跟踪所有菜单项以及哪些状态。对于简单的菜单图标指令，这可能是过度的。

Answer 2

尝试以下方法，

app.directive('menuico', function($rootScope) {
    return {
        restrict: 'E',
        replace:true,
        scope: {},
        template: '<a href="#{{route}}"><img src="img/{{image}}" /></a>',
        link: function(scope, elem, attrs) {
            var active = false;
            var defaultRoute = "";
            var activeIcon = "ico_close.png";

            scope.image = attrs.imagedefault;
            scope.route = attrs.linkto;
            elem.bind("click", function() {
                active = !active;
                if(active) {
                    scope.route = defaultRoute;
                    scope.image = activeIcon;
                } else {
                    scope.route = attrs.linkto;
                    scope.image = attrs.imagedefault;
                }
                $rootScope.$emit('resetElements', scope.route);
            });
            $rootScope.$on('resetElements', function(event, data) {
                if(data != scope.route) {
                    scope.route = attrs.linkto;
                    scope.image = attrs.imagedefault;    
                }    
            });
        }
    };
});

因此，只要有点击事件，您就会收听resetElements事件。所有其他与点击路线不匹配的按钮都将被重置。

使用app.directive AngularJS更改图标

2 个答案: