Question

我有一个包含一些列表项的滑动菜单。我想根据登录的用户类型更改某些项目的可见性。

我有3个控制器：LoginController，AppController和我刚做了一个MenuController。

这是我的菜单：

<ons-template id="menu.html">
    <ons-page ng-controller="menuController" ng-init="initMenu()">
      <ons-list>
        <ons-list-item modifier="tappable" onclick="menu.setMainPage('navigator.html', {closeMenu: true})">
          <ons-icon icon="ion-home" style="padding-bottom:2px;"></ons-icon>  Home
        </ons-list-item>
        <ons-list-item modifier="tappable" ng-hide="{{isTypeA}}" onclick="menu.setMainPage('Page1.html', {closeMenu: true})">
          <ons-icon icon="ion-clipboard" style="padding-bottom:2px;"></ons-icon>  Page 1
        </ons-list-item>
        <ons-list-item modifier="tappable" ng-hide="{{isTypeA}}" onclick="menu.setMainPage('Page2.html', {closeMenu: true})">
          <ons-icon icon="ion-loop" style="padding-bottom:2px;"></ons-icon>  Page 2
        </ons-list-item>

        <ons-list-item modifier="tappable" ng-hide="{{isTypeA}}" onclick="menu.setMainPage('Page3.html', {closeMenu: true})">
          <ons-icon icon="ion-compose" style="padding-bottom:2px;"></ons-icon>  Page 3
        </ons-list-item>
        <ons-list-item modifier="tappable" onclick="menu.setMainPage('Page4.html', {closeMenu: true})">
          <ons-icon icon="ion-gear-a" style="padding-bottom:2px;"></ons-icon>  Settings
        </ons-list-item>
      </ons-list>
  </ons-page>
</ons-template>

登录用户时，菜单控制器首先加载，因此init函数已经完成。然后当用户键入他的凭证并按下LOGIN时，我使用服务在变量中设置许可类型，但是当应用加载时，它已经太晚了。

如何解决此问题，所以在登录后，菜单再次初始化，ng-hide将正确隐藏/显示所有必要的元素？

Answer 1

您需要编写一个menuList数组作为范围属性，其中包含showMenu等字段还有一个在登录后更新菜单字段（showMenu）的功能

function menuController ($scope){
  // init menu
  $scope.menuList = [{
       showMenu: true,
       menuPage: 'Page1.html',
       ...
    }, 
    {  showMenu: true,
       menuPage: 'Page2.html',
       ...
    }
    , ...];

  // call this function after logging in
  function updateMenuAfterLogin() {
      menuList.foreach (function(menu){
          if ('someCondition') {
              menu.showMenu= false;
          }
      }
  }

}

然后写一个ng-repeat来呈现你的列表：

      <ons-list>
        <ons-list-item modifier="tappable" ng-repeat= "menuItem in menuList"  ng-hide="{{menuItem.show}}" onclick="menu.setMainPage({{menuItem.menuPage}}, {closeMenu: true})">
          <ons-icon icon="ion-home" style="padding-bottom:2px;"></ons-icon>  Home
       </ons-list-item>
     </ons-list>

Answer 2

我看到了解决这个问题的两种方法：

如何解决此问题，所以在登录后，菜单再次初始化，ng-hide将正确隐藏/显示所有必要的元素？

这是第一种方式 - 在您登录后，您可以重新加载菜单页menu.setMenuPage('menu.html')或任何类似的明确进行更改的内容。
或者，因为你说的是

我使用服务在变量
中设置许可证类型

您可以让该变量对视图可见，并将其用于ng-show/ng-hide。这是一个简单的Demo，可以看到它的实际效果。

基本上这就是我们从angular的2路数据绑定中得到的结果 - 我们甚至可以在true和false之间切换值，并且项目会相应更新。

选择权在你手中。我认为第二个感觉更接近“角度方式”，但是如果你更喜欢明确地设置它也没关系，因为在Angular发明之前很久就已经有用了。

从控制器重新加载菜单以隐藏菜单项

2 个答案: