0

我正在尝试构建的应用程序有一个固定的顶部导航栏、一个左面板和一个右面板。右侧面板显示每个用户唯一的推荐产品列表，左侧面板有两部分 - 购物车列表，显示添加的产品，以及用户选项卡。

我想做的是维护不同用户之间的状态，即，如果我单击用户选项卡，我应该在右侧看到一个产品列表，对他来说是独一无二的，他应该能够将这些添加到购物车列表中显示在左侧，如果我切换到另一个用户，它必须显示新产品和相应的购物车列表（如果他已经添加或显示为空）。

此外，左右面板之间必须有双向交互，即如果我单击添加到购物车的产品，我应该能够在右侧看到推荐产品列表。

为了演示，我只是使用 JSON 来存储产品，没有服务器交互。

事实证明，使用两个控制器和一个服务来实现这一点对我来说有点困难。我该如何解决这个问题？

4

1 回答 1

0

我认为您需要了解两件事才能更轻松地做到这一点：1 是 routeProviders，2 是 ng-include。

routeProvider 将允许您对不同的 HTML“部分”进行“顶级导航”，它本质上会将 URL 映射到视图。我还没有做任何太复杂的事情，但据我了解，处理另一个级别的导航或子视图的方法是使用 ng-include 指令。

当页面加载时，我还使用了一些代码来恢复模型中的值（我使用 $location 服务来获取有关 URL 的信息，模型上的这个属性反过来会导致在导航元素上设置一些类突出显示当前页面）。

这是我用于几个运行良好的项目的完整“种子”代码：

var mainApp = angular.module("mainApp", []);

// mainApp.run(function($rootScope, $location, $anchorScroll, $routeParams) {
//   //when the route is changed scroll to the proper element.
//   $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
//      if(document.documentElement.clientWidth>=600)
//          return;
//     $location.hash("contentArea");
//     $anchorScroll();  
//   });
// });

mainApp.controller("NavigationCtrl", function ($scope, $location,$anchorScroll) {
    $scope.currentPage = "home";
    $scope.pages = [
                    {label:'Home', location:'home'},
                    {label:'Page2', location:'page2'}
                    ];
    $scope.gotoPage = function(item) {
        $scope.currentPage = item.location;
        $location.path("/"+item.location)
    };

    $scope.initialize = function() {
        $scope.currentPage = $location.path().substring(1);
    };


    $scope.goHome = function() {
        $scope.currentPage = "home";
        $location.path("/home")
    };

    $scope.itemClass = function(item) {
        return item.location === $scope.currentPage ? 'active' : undefined;
    };
});

mainApp.config(function($routeProvider){
    $routeProvider.
        when("/", {templateUrl:'partials/home.html'}).
        when("/home", {templateUrl:'partials/home.html'}).
        when("/page2", {templateUrl:'partials/secondPage.html'}).
        otherwise({redirectTo:"/"});
});

在 HTML 中

<header>
<div id="headerRegion">
    <a ng-click="goHome()">
        <div id="logoWrapper">
            <img src="images/logoBig.png" id="headerLogo" alt="Intellect-Tech Logo">
        </div>
        <div id="companyName">
            Company name goes here
        </div>
        <div id="slogan">
            <i>Slogan goes here</i>
        </div>
    </a>
    <div class="clear"></div>
</div>
</header>
<nav ng-init="initialize()">
    <div id="pointerContainer">
        <img src="images/navPointer.png" id="navPointer" class="{{currentPage}}"/>
    </div>
    <div id="navText">
        <ol>
            <li ng-click="gotoPage(item)" ng-repeat="item in pages" ng-class="itemClass(item)">
                {{item.label}}
            </li>
        </ol>
    </div>
</nav>

如果您希望我可以将其发布到 github 并为您提供链接，我一直打算将它放在那里。这段代码绝不是完美的，而是一个正在进行中的工作，它帮助我立即开始了很多项目，而不会让人头疼。

于 2013-07-02T04:07:36.623 回答