Question

我的导航栏有一个控制器，因为它会在某些页面而不是其他页面上。这是导航栏的标记：

<html ng-app="myApp">
 <head>
   <title> My layout.html </title>
 </head>
 <body>
   <nav ng-controller="NavCtrl">
    I have this NAVBAR
   </nav>
  <div ui-view></div> 
 </body>
</html>

通常情况下，我会在路线中指定控制器的名称，如下所示：

$stateProvider.state('/', {
 controller: 'NavbarCtrl'
});

但是在这种情况下，我没有与导航栏对应的路线，我只有自己的导航栏控制器文件。我的问题是：如何在没有templateUrl通过ui-router的情况下注册控制器？

Answer 1

无需在ui-router中注册控制器;只需在应用程序模块中定义控制器即可。

angular.module('myApp').controller('NavbarCtrl', function($scope) {
    $scope.testVar = "some value";
});

现在，您可以在控制器管理的模板的一部分中访问testVar变量。

Answer 2

我认为提供可维护代码的另一种方法是在$stateProvider中使用导航栏的基本状态。

    $stateProvider
      .state('base', {
        templateUrl: 'base.html',
        controller: 'NavbarCtrl'
      })
      .state('base.child', {
        url: 'url-of-child-state',
        views: {
          'view-for-navbar': {
            templateUrl: 'child-template',
            controller: ChildCtrl
          }
        }
      })

现在，您可以在各种子页面上使用导航栏，就像母版页一样。只需在base.html及以下的导航栏中添加代码即可添加此行<div ui-view="main-view"></div>

在Angular

2 个答案: