如何创建将存储当前活动菜单的服务?

时间:2015-06-23 08:20:35

标签: angularjs

点击我更改视图的链接,重新实例化我的控制器。这就是activeMenu为空的原因。如果icreate一个服务并将当前活动的菜单存储在那里,它将不会为空。如何创建服务来做到这一点?这是我第一次需要创建服务吗?这是我的plnkr ... http://plnkr.co/edit/gJko3umteXXEye7o9StR?p=preview 问题是当用户从布局点击菜单然后重新实例化我的控制器

布局:

  <li class="dropdown">

<ul class="submenu">
<li><a href="../Account/#/PersonalInfo" ng-click="SetActiveMenuForPersonalInfo();">@Translate("MY_ACCOUNT")</a></li>
<li ng-click="GetLoader();"><a href="#">@Translate("SETTINGS")</a></li>
<li ng-click="GetLoader();"><a href="../Account/#/Tickets">@Translate("TICKET_HISTORY")</a></li>
<li ng-click="GetLoader();"><a href="../Account/#/Transactions">@Translate("TRANSACTIONS")</a></li>
<li ng-click="GetLoader();"><a href="#">@Translate("BONUS_ACCOUNT")</a></li>
<li><a href="#">@Translate("ODDS_REPRENSETATION")</a></li>
<li><a href="#">@Translate("HELP")</a></li>
<li><a href="javascript:document.getElementById('logoutForm').submit()">@Translate("LOGOUT")</a></li>
  </ul> </li>

1 个答案:

答案 0 :(得分:1)

你可以这样做:

app.service('navigation', function () {
  this.activeLink = '';
});

app.controller('MainCtrl', function($scope, navigation) {  
  $scope.activeMenu = 'Home';
  $scope.activeLink = navigation.activeLink;

  $scope.changeActiveLink = function(link) {
    $scope.activeLink = link;
    this.activeLink = link;
  }
});

该服务是一个单身,每次应用程序加载时它会被插入一次,因此它会在您的应用程序的不同状态之间保持指定的值。

如果你不是存储一个简单的字符串值而是一个对象,你可以让它更聪明一点 - 这样我们就能够保持对服务的价值的引用而不是价值本身,我们不需要明确设置$scope.activeLink = link;this.activeLink = link;

app.service('navigation', function () {
  this.active = {
    link: '',
    menu: 'Home'
  };
});

app.controller('MainCtrl', function($scope, navigation) {
  $scope.activenav = navigation.active;

  $scope.changeActiveLink = function(link) {
    navigation.active.link = link;
  }
});

只记得在第二种情况下对你的html代码进行必要的更改