Question

我的ReverseService服务中有一项功能。我在service中使用此controller。在ng-click上拨打电话。问题是，我正在为两个ng-click调用相同的函数，因此应用于我希望它只应用于一个（我点击的那个）的地方。我知道为什么会这样，但我无法提出解决方案。这是代码 HTML

<div id="sidebar" ng-controller="SideCtrl">
            <!-- here goes a static sidebar -->
            <div class="large_3_custom columns">
                <ul class="side-nav side_nav_custom">
                    <li>
                        <img src="images/dashboard.png" alt="">
                        <a href="#">DASHBOARD</a>
                    </li>
                    <li>
                        <img ng-src="images/company_profile.png" alt="">
                        <a href="#">COMPANY PROFILE</a>
                        <img ng-src="{{images.current}}" ng-click="swapHere();subSec = !subSec" id="arrowRotate">
                    </li>
                    <li ng-show="subSec">
                        <img src="" alt="">
                        <a href="#">SERVICES</a>
                    </li>
                    <li ng-show="subSec">
                        <img src="" alt="">
                        <a href="#">EMPLOYEES</a>
                    </li>
                    <li>
                        <img src="images/statistics.png" alt="">
                        <a href="#">STATISTICS</a>
                    </li>
                    <li>
                        <img src="images/reviews.png" alt="">
                        <a href="#">REVIEWS</a>
                    </li>
                    <li>
                        <img src="images/tips_advice.png" alt="">
                        <a href="#">TIPS & ADVICE</a>
                    </li>
                    <li>
                        <img src="images/deals.png" alt="">
                        <a href="#">DEALS</a>
                    </li>
                    <li>
                        <img src="images/media.png" alt="">
                        <a href="#">MEDIA</a>
                    </li>
                    <li>
                        <img src="images/price_list.png" alt="">
                        <a href="#">BOOKING</a>
                        <img ng-src="{{images.current}}" ng-click="swapHere();bookSec = !bookSec" id="arrowBook">
                    </li>
                    <li ng-show="bookSec">
                        <img src="" alt="">
                        <a href="#">CALENDAR</a>
                    </li>
                    <li>
                        <img src="images/market.png" alt="">
                        <a href="#">MARKET</a>
                    </li>
                    <li>
                        <img src="images/sponser_deal.png" alt="">
                        <a href="#">SPONSOR A DEAL</a>
                    </li>
                    <li>
                        <img src="images/extra_services.png" alt="">
                        <a href="#">EXTRA SERVICES</a>
                    </li>
                </ul>
            </div>
        </div>

Angular

var myApp = angular.module("myApp", []);
myApp.service("ReverseService", function() {
    // service func goes here --
    this.imgSwap = function(images) {
        if (images.current === images.finalImage) {
            images.current = images.initialImage;
        } else if (images.current === images.initialImage) {
            images.current = images.finalImage;
        }
    };
});
myApp.controller("SideCtrl", function($scope, ReverseService) {
    console.log("thomas");
    $scope.myData = {};
    $scope.images = {
        initialImage: "images/prof_arrow1.png",
        finalImage: "images/prof_arrow.png",
        current: "images/prof_arrow1.png"
    };
    $scope.swapHere = function() {
        ReverseService.imgSwap($scope.images);
    };
    $scope.subSec = false;
    $scope.bookSec = false;
});

这是Plunker.

Answer 1

您应该隔离图像值的范围

我已更新了插件：plunk

您需要做的是具有隔离范围和控制器的指令。（我让你玩css来正确对齐图像）：我创建了一个模板（swapimage.html）

 <img src="{{displayImage}}" ng-click="imageClicked()">

和指令

myApp.directive("swapArrow", function(ReverseService){
  return {
    restrict:'A',
    scope : {
      images :'=',
      toggleValue : '='
    },
    templateUrl:'swapimage.html',
    controller:function($scope, ReverseService){
      $scope.imageClicked = function(){
        ReverseService.imgSwap($scope.images); 
        $scope.displayImage = $scope.images.current;
        $scope.toggleValue = !$scope.toggleValue;
        console.log($scope.toggleValue);
      };

    },
    link:function(scope, element){
      scope.displayImage = scope.images.current;
    }
  }
});

但在我看来，不是使用 toggleValue ，您最好转换内容并使用show hide值进行播放

将单个服务逻辑应用于两个相似的按钮

1 个答案: