Question

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

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

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

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

使用两个控制器和服务实现这一点对我来说有点困难。我怎样才能解决这个问题？

Answer 1

我认为你需要学习的两件事就是更轻松地做到这一点1是routeProviders，2是ng-include。

routeProvider将允许您对不同的HTML“partials”进行“顶级导航”，它将基本上将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并给你一个链接，我一直打算在那里得到它。这段代码绝不是完美的，但它是一项正在进行中的工作，并帮助我立刻开始了很多项目而没有太多麻烦。

在angularjs中维护不同的模型状态

1 个答案: