使用 app.directive AngularJS 更改图标

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;
                }
            });
    }
  };
});

例如，我需要的是，如果我单击“ico_search_off.png”，则此更改为“ico_close.png”，如果我现在单击“ico_user_off.png”，则此更改为“ico_close .png”和第一个要变回原来的状态，也就是“ico_search_off.png”，但是第一个不变，保持在当前状态

Answer 1

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

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

我的首选方法是将点击事件绑定到 $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 事件。所有其他与点击的路由不匹配的按钮将被重置。