Question

在我的项目中，我要做一些与virginamerica.com ux逻辑非常类似的事情。我将我的页面设置为3个部分，并根据routeParams将它们设置为可见。所以，想象一下：

项目列表[在根目录中可见]
具有一些变化的项目的详细信息[在根/项目上可见]
项目编辑器页面[在根/项目/ var上可见]

我正在设置一个角度应用程序来执行此操作，但我遇到了一些问题，我正在做这样的事情：

在我的index.html中我有这段代码：

<!DOCTYPE html>
<html ng-app="box">

<head lang="en">
    <meta charset="utf-8">
    <title>Box loader</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="box.js"></script>
    <!-- <base href="/"> -->
</head>

<body ng-controller="boxCtrl">
<section id="box-chooser">
    <ul>
        <li ng-repeat="box in boxes">
            <a href="#/{{box.boxid}}">{{box.boxname}}</a>
        </li>
    </ul>
</section>
<div ng-show="detailVisible">
<section ng-controller="boxDetailCtrl">

    <h1>detail {{boxcode}}</h1>

</section>
</div>
</body>

</html>

这是angularjs部分：

var app = angular.module('box', []);

app.config(function($routeProvider /*$locationProvider*/) {
    $routeProvider
        .when('/', {} )
        .when('/:boxid', {


        })

    //$locationProvider.html5Mode(true);
});


app.controller('boxCtrl', function($scope, $route, $location) {
    $scope.$on('$routeChangeSuccess', function() {
        var path = $location.path();
        console.log(path);
        $scope.detailVisible = false;
        if(path === '/123') {

            $scope.detailVisible= true;
        }
    });

    $scope.boxes = [{'boxid':'123', 'boxname': 'name1'}, {'boxid':'189', 'boxname': 'name2'}, {'boxid':'156', 'boxname': 'name3'}]

});

app.controller('boxDetailCtrl', function($scope, $route, $location){

    $scope.boxcode = $location.path();


    console.log('secondo:' + $location.path())


});

问题是第二个控制器上的boxcode只有在localhost /＃/ 123页面刷新和ng-show处理路径更改后才能工作。

这样做更好吗？在此先感谢：）

使用ng-show显示页面的部分内容，例如virginamerica网站

0 个答案: