Bootstrap 4带有角的Navbar-如何激活项目

Question

我将B4 Navbar用Angular Router状态组合在一起。这是我的代码：

html：

<ul class="nav" id="myTab" role="tablist">
   <li class="nav-item">
      <a class="nav-link active" ui-sref="state1" href="#">Active</a>
  </li>
  <li class="nav-item">
     <a class="nav-link" ui-sref="state2" href="#">Link</a>
 </li>
</ul>
<div ui-view></div>

控制器：

var myApp = angular.module("myApp",[ "ui.router", "AppCtrls"]);
 myApp.config(function ($stateProvider, $urlRouterProvider){
 $stateProvider.state("state1", {
    url: "#",
    template: "<p>State 1</p>",
    controller: "Ctrl1"
  }).state("state2", {
    url: "#",
    template: "<p>State 2</p>",
    controller: "Ctrl2"
  });
});
var ctrls = angular.module("AppCtrls", []);
ctrls.controller( "Ctrl1", function($scope) {
console.log("Ctrl1 loaded.");
});
ctrls.controller( "Ctrl2", function($scope) {
     console.log("Ctrl2 loaded.");
});

我要实现的是要拥有一个默认的活动项目，其中显示其内容。我正在设置第一个指向Active的链接，但无能为力。这是我的小提琴

Answer 1

尝试此代码html：

    <ul class="nav" id="myTab" role="tablist">
   <li class="nav-item" ui-sref-active="active">
      <a class="nav-link" ui-sref="name1">Active</a>
  </li>
  <li class="nav-item" ui-sref-active="active">
     <a class="nav-link" ui-sref="name2">Link</a>
 </li>
</ul>
<div ui-view></div>

和这个角度：

var myApp = angular.module("myApp",[ "ui.router"]);
 myApp.config(function($stateProvider, $urlRouterProvide) {
$urlRouterProvider.otherwise("/");
$stateProvider
    .state('name1',{
        url: "/name1",
        conontroller:'ctrl1',
        templateUrl: "name1.html"
    })
    .state('name2',{
        url: "/name2",
        conontroller:'ctrl2',
        templateUrl: "name2.html"
    })
});

myApp.controller( "ctrl1", function($scope) {
console.log("Ctrl1 loaded.");
});
myApp.controller( "ctrl2", function($scope) {
     console.log("Ctrl2 loaded.");
});