Прежде всего ng-if доступно на angularjs> 1.1.5 , поэтому я изменяю ваш скрипт src с 1.0.7 на 1.1.5:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
Тогда я 'm добавив следующий код, чтобы проверить, содержит ли меню меню или нет:
<ng-template ng-if="menu.menus.length > 0">
<a href="{{menu.action}}" class="dropdown-toggle nav-link" data-toggle="dropdown">{{menu.title}}</a>
<ul ng-if="menu.menus" class="dropdown-menu">
<li ng-repeat="submenu in menu.menus">
<a href="{{submenu.action}}">{{submenu.title}}</a>
</li>
</ul>
</ng-template>
<ng-template ng-if="menu.menus.length == null">
<a href="{{menu.action}}" class="nav-link" data-toggle="dropdown">{{menu.title}}</a>
</ng-template>
app = angular.module("myapp", []);
app.controller("MainController", function($scope, $http) {
$scope.menus = [
{
title: "Menu1",
action: "#",
menus: [
{
title: "Submenu 1a",
action: "//placekitten.com/300/300"
},
{
title: "Submenu 1b",
action: "//placekitten.com/300/300",
menus: [
{
title: "Submenu 1b 1",
action: "stuff"
},
{
title: "Submenu 1b 2",
action: "moreStuff"
}
]
}
]
},
{
title: "Menu2",
action: "//placekitten.com/300/300"
}
]
});
$(document).ready(function() {});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<body ng-app="myapp">
<header ng-controller="MainController">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<li ng-repeat="menu in menus" class="nav-item dropdown">
<ng-template ng-if="menu.menus.length > 0">
<a href="{{menu.action}}" class="dropdown-toggle nav-link" data-toggle="dropdown">{{menu.title}}</a>
<ul ng-if="menu.menus" class="dropdown-menu">
<li ng-repeat="submenu in menu.menus">
<a href="{{submenu.action}}">{{submenu.title}}</a>
</li>
</ul>
</ng-template>
<ng-template ng-if="menu.menus.length == null">
<a href="{{menu.action}}" class="nav-link">{{menu.title}}</a>
</ng-template>
</li>
</div>
</div>
</nav>
</header>
</body>
Обновление:
Причина, по которой ссылка не работает, потому что у вас ng-click="$event.preventDefault();" в <nav class="navbar navbar-expand-lg navbar-light bg-light"> также data-toggle="dropdown".Другая причина, по которой он может быть недоступен, возможно, из-за того, что `X-Frame-Options 'было установлено на' sameorigin '.