Foundation Zurb DropDown 不适用于 ng-class

Question

我在下拉菜单中添加了 ng-class，以便为导航点提供不同的 classes。现在子项不再工作，当我悬停时（只需单击一下子项就会打开）。

<section class="top-bar-section para">             
      <ul class="left para">
        <li class="divider2"></li>
        <li ng-class="{'has-dropdown para divider2':navigation.type == 'Sub', 'nav_button divider2':navigation.type == 'Main'}" ng-repeat="navigation in nav.links">

          <a ng-if="navigation.type == 'Main'" href="{{navigation.link1}}" class="para">{{navigation.name}}</a>
          <a ng-if="navigation.type == 'Sub'" href="#" class="para">{{navigation.name}}</a>
          <ul ng-if="navigation.type == 'Sub'" class="dropdown">              
            <li ng-repeat="subitem in navigation.subitems"><a href="{{subitem.link}}">{{subitem.name2}}</a></li>                
          </ul> 

        </li>
      </ul>
    </section>

使用此代码可以正常工作 - 但是没有子菜单的导航点有错误 class

 <section class="top-bar-section para">             
      <ul class="left para">
        <li class="divider2"></li>
        <li class="has-dropdown divider2" ng-repeat="navigation in nav.links">

          <a ng-if="navigation.type == 'Main'" href="{{navigation.link1}}" class="para">{{navigation.name}}</a>
          <a ng-if="navigation.type == 'Sub'" href="#" class="para">{{navigation.name}}</a>
          <ul ng-if="navigation.type == 'Sub'" class="dropdown">              
            <li ng-repeat="subitem in navigation.subitems"><a href="{{subitem.link}}">{{subitem.name2}}</a></li>
            <!--<li><a href="#">Dropdown Option</a></li>      -->      
          </ul> 

        </li>
      </ul>
    </section>

这是我的 JSON 文件和控制器。

{
"projectTitle": "Test",
"menutitlemobile": "Menu",
"links": [
        {
        "type": "Sub",
        "name": "Menu1",
        "subitems": [{
            "name2": "Sublink1",
            "link": "http://www.google.com"
            }, 
            {
            "name2": "Sublink2",
            "link": "http://www.google.com"
            }]
        },

        {
        "type": "Main",
        "name": "Menu2",
        "link1": "http://www.google.com"
        }

]}

app.controller('NavCtrl', function($scope, $http) {

$http({
      method: 'GET',
      url: 'navigation.json',
      data: 'json',
      cache: 'false'       

      }).success(function (data) {              

          $scope.nav = data;
      })

        .error(function(data, status) {

          console.error('Repos error', status, data);
        });});

Answer 1

我稍微编辑了你的 plunker，看看 http://plnkr.co/edit/CZiKTApTbkc3gnzy5eMl?p=preview

确保只加载一次AngularJS，jQuery在AngularJS之前加载（index.html）。

在 app.js 中，我在您的数据加载后添加了一个 $timeout。通过此 "out of scope" 操作，它可以正常工作。

不太好，但很管用 ;)

Foundation Zurb DropDown 不适用于 ng-class

Foundation Zurb DropDown not working with ng-class

javascript

zurb-foundation

angularjs