Question

我试图使用ng-repeat，ui路由器和来自json文件的数据制作动态菜单。这是我的navbar.html

 <ul class="nav navbar-nav" ng-controller="NavBarCtrl">         

  <div ng-repeat="item in navbarlist">
  <li><a ui-sref="item.title" ui-sref-active="active">{{item.title}}</a></li>
  </div>  <!--ng-repeat-->
  </ul>

navbar.js

var app = angular.module("catalogue", ['ui.router'])

  app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {

    $stateProvider   
       .state('navbar', {
        url: '/navbar',
        templateUrl: 'navbar/navbar.html',
        controller: 'NavBarCtrl'
      })

  }])


app.controller('NavBarCtrl', ['$scope', '$http', function($scope, $http, $stateParams) {
     $http.get('navbar.json').then(function(response){
    //  $scope.navbar = response.data;
     //   $scope.navbar = "navbar.data" [];
    //   $scope.navbarlist = "navbarlist" [];

       $scope.navbarlist = response.data; 


  });
}])

和navbar.json

{
    "navbarlist": [
        {
            "title": "home"

        },
        {
            "title": "category1"

        },
        {
            "title": "category2"

        },
        {
            "title": "category3"

        },
        {
            "title": "category1"

        },
        {
            "title": "category2"

        }

    ]
}

我在index.html

  <navbar></navbar>

但我的导航栏没有显示。我假设问题出在控制器上。我哪里出错？

Answer 1

我认为你的问题不在控制器中。

您在index.html中提到过您的标记，但没有定义它。

<navbar></navbar>

要使用这样的自定义标签，请阅读有关指令的更多信息： https://docs.angularjs.org/guide/directive 您需要制定一个指令并指定模板或templateUrl它。

对于这个代码示例，只需将您的标记直接放在index.html中，它就可以解决问题。

您在JSFiddle指令中的工作代码：https://jsfiddle.net/ukulikov/424z6o2x/

ng-repeat动态菜单angularJS

1 个答案: