Question

在我的Angular应用程序中，我在index.html中有这个代码：

<!DOCTYPE html>
<html data-ng-app="MyApp">
<head>
    <title>AngularJS</title>
    <!-- load css ... -->
</head>
<body>
    <!-- My menu bar -->
    <nav ng-controller="MenuCtrl">
        <ul>
            <span ng-repeat="action in actions">
                <li><a href="{{action.href}}">{{action.name}}</a></li>
            </span>
        </ul>
    </nav>

    <div class="container" ng-view>
        <!-- content -->
    </div>

    <!-- load Angular Library -->
    <!-- load services -->
    <!-- load controllers -->
</body>
</html>

内容是从部分html文件加载的。

但是现在，我想添加一个没有菜单控制器的登录页面。未连接用户时，不应显示<nav>栏。

如何将<nav>栏与MenuCtrl放在一起，而不会在每个部分html文件中重复代码？

Answer 1

您可以使用factory

来使用角度的依赖注入

check this plunker

<强> JS

app.factory('ShareObject', function() {

  var ShareObject = function(){};

  return ShareObject;
});

app.controller('MenuCtrl', function($scope, ShareObject) {
  $scope.share = ShareObject;

  $scope.login = function() {
    // Go to backend and login,
    // ...
    $scope.share.user = {
      username: 'julien_dumortier',
      name: 'Julien Dumortier'
    };

  };

  $scope.logout = function() {
    // Go to backend and logout,
    // ...
    $scope.share.user = null;

  };
});

app.controller('mainController', function($scope, ShareObject) {
  $scope.share = ShareObject;
});

<强> HTML

 <!-- My menu bar -->
  <nav ng-controller="MenuCtrl">

      <div ng-show="share.user" >
        Logged in as {{ share.user.username }} 
        <a ng-click="logout()">logout</a>
      </div>
      <a ng-show="!share.user" ng-click="login()">login</a>

  </nav>

    <div class="container" ng-view></div>

查看

<h2>Home</h2> Logged in as {{ share.user.username }}

如何将单页AngularJS应用程序中的Menu Controller与主页集成

1 个答案: