Question

我正在将B4导航栏与Angular路由器状态放在一起。这是我的代码：

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.");
});

我想要实现的是拥有一个默认的活动项目，并显示其内容。我正在设置第一个活动的链接，但它没有做任何事情。这是我的 Fiddle

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>

这个Angular：

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.");
});

带有Angular的Bootstrap 4导航栏 - 如何激活项目

1 个答案: