Question

我在AngularJS中使用UI-Router时遇到了令人沮丧的时间1.当页面加载时，我希望导航栏图像能够反映当前状态：即，如果用户在主页上，则显示“Home”导航栏图像应以蓝色突出显示（其余为灰色）;如果用户点击“关于”＆amp;状态更改为“关于”，“关于”的导航栏图像应突出显示为蓝色，其余部分保持灰色等等。

我有灰色图像＆amp;蓝色图像存储在我的控制器内的objs中。我正在观察同一控制器中的$state更改。我一直面临着让这个问题发挥作用的几个障碍：

如果console.log($state.current)函数中的init()（通过ng-init在控制器初始化时运行），它告诉我当前状态是未定义的。因此，当页面首次加载时，导航栏图像都不是蓝色（如果用户所在的页面为“Home”，则“Home”图像应为蓝色。）
如果我console.log(newVal)中有$scope.$watch，我发现当状态发生变化时，应用会注册此内容。但是，如果我尝试将ng-click="init()"添加到我的<a>个标记中，makeCurrentStateBlue()函数将在点击时注册状态，而不是在用户点击后实际加载的状态导航栏按钮，使这个解决方案无用。

我只需要我的导航栏根据当前状态替换一个蓝色图像。救命啊！

这是我的导航栏控制器：

app.controller("NavCtrl", ['$scope', '$state',
  function($scope, $state) {

    $scope.init = function(){
      var srcs = angular.copy($scope.greys);
      srcs = $scope.makeCurrentStateBlue(srcs);
      $scope.imgsrcs = srcs;
    }

    $scope.imgsrcs = {};

    $scope.greys = {
      "home": "assets/navbar/grey1.jpg",
      "inventory": "assets/navbar/grey2.jpg",
      "about": "assets/navbar/grey3.jpg",
      "contact": "assets/navbar/grey4.jpg",
      "vendors": "assets/navbar/grey5.jpg"
    };

    $scope.blues = {
      "home": "assets/navbar/blue1.jpg",
      "inventory": "assets/navbar/blue2.jpg",
      "about": "assets/navbar/blue3.jpg",
      "contact": "assets/navbar/blue4.jpg",
      "vendors": "assets/navbar/blue5.jpg"
    };

    $scope.makeCurrentStateBlue = function(srcs){
      srcs[$scope.currentState] = $scope.blues[$scope.currentState];
      return srcs
    }

    $scope.$watch(function(){
      return $state.$current.name
    }, function(newVal, oldVal){
      $scope.currentState = newVal;
    });

}]);

以下是相关的导航栏HTML：

<a ui-sref="home">
    <img name="setup_r2_c1" ng-src="{{imgsrcs['home']}}" />
</a>

<a ui-sref="inventory">
    <img name="setup_r2_c2" ng-src="{{imgsrcs['inventory']}}" />
</a>

<a ui-sref="about">
    <img name="setup_r2_c3" ng-src="{{imgsrcs['about']}}" />
</a>

<a ui-sref="contact">
    <img name="setup_r2_c4" ng-src="{{imgsrcs['contact']}}" />
</a>

<a ui-sref="vendors">
    <img name="setup_r2_c7" ng-src="{{imgsrcs['vendors']}}" />
</a>

如何在AngularJS 1中显示当前的导航栏状态？

0 个答案: