Question

我查看了Stackoverflow但尚未找到解决方案。我有一个带有ui-view的首页，然后是一个具有第二个ui-view的工作页面。我添加ui-view="portfolio"然后将其链接到我的主js文件中，但没有。

app.js

        'use strict';

    var app = angular.module('myApp', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ui.router'])
    .config(function ($stateProvider, $urlRouterProvider) {
      $stateProvider
      .state('home', {
        url: '/',
          templateUrl: 'app/main/main.html',
          controller: 'MainCtrl'
      })
      .state('about', {
        url: '/about',
        templateUrl: 'app/about/about.html',
        controller: 'AboutCtrl'
      })
      .state('work', {
        url: '/work/:workId',
        views: {
        'portfolio@work': {
          templateUrl: 'app/work/work.html',
          controller: 'WorkCtrl'
          }
        }
      });

      $urlRouterProvider.otherwise('/');

    });

    app.run(['$rootScope', '$http', function($rootScope, $http) {
      $http.get('projects/projects.json').success(function(data) {

    function shuffle(o){ //v1.0
      for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x){}
        return o;
    }

    $rootScope.allWorks = shuffle(data);
    });
    }]);

工作控制器

    'use strict';

    var app = angular.module('myApp');

    app.controller('WorkCtrl', ['$scope', '$stateParams', '$http', '$location', function($scope, $stateParams, $http, $location) {

        if (!$stateParams.workId) {
            $location.path('/');
        }

        $http.get('projects/' + $stateParams.workId + '.json').success(function(data) {
            $scope.work = data;
            $scope.pageClass = 'page-work'; // only use to add class for ui view

            //function for next previous

            var currentWorkIndex;
            var l = $scope.allWorks.length;
            for (var i = 0; i < l; i++) {
                if ($scope.allWorks[i].id === $stateParams.workId) {
                    currentWorkIndex = i;
                    break;
                }
            }
            var prevWorkIndex = (currentWorkIndex !== 0) ? (currentWorkIndex - 1) : (l - 1);
            var nextWorkIndex = (currentWorkIndex !== l - 1) ? (currentWorkIndex + 1) : (0);
            $scope.prevWork = $scope.allWorks[prevWorkIndex].id;
            $scope.nextWork = $scope.allWorks[nextWorkIndex].id;


        });

    }]);

主控制器

    'use strict';

    var app = angular.module('myApp');

    app.controller('MainCtrl', ['$scope', function($scope) {
        $scope.pageClass = 'page-home';

    }]);

工作HTML

    <div class="work {{work.class}}" data-loading="{{1}}" ui-view="portfolio">

      <section class="top">

        <img src="/assets/images/placeholder.png" ng-src="{{work.img.top}}" alt="{{work.sub}}">

        <hgroup>
          <h3>{{work.title}}</h3>
          <h5>{{work.sub}}</h5>
        </hgroup>

      </section>

      <article>
        <div class="col1">
          <h5>Background</h5>
          <p>{{work.bg}}</p>
        </div>
        <div class="col2">
          <h5>Involvement</h5>
          <p>{{work.role}}</p>
          <h5>Visit</h5>
          <a href="{{work.url}}" target="_blank">{{work.url}}</a>
        </div>
      </article>

      <section class="photos">
        <img src="/assets/images/placeholder.png" ng-src="{{work.img.left}}" alt="{{work.sub}}">
        <img src="/assets/images/placeholder.png" ng-src="{{work.img.right}}" alt="{{work.sub}}">
      </section>

      <section class="ui">
        <img src="/assets/images/placeholder.png" ng-src="{{work.img.ui}}" alt="{{work.sub}}">
      </section>

      <footer>
        <a ui-sref="work({workId:prevWork})"><span class="icon-chevron-l"></span><p>Previous</p></a>
        <a href="/#/"><span class="icon-close-line"></span></a>
        <a ui-sref="work({workId:nextWork})"><p>Next</p><span class="icon-chevron-r"></span></a>
      </footer>

    </div>

这是一个傻瓜。 http://plnkr.co/edit/KyiynhLsjjKSp7dxGtYT?p=preview

任何提示或建议都可以解决我的问题。大多数教程只涉及一个基本概念，但我的问题有点复杂。

Answer 1

以下是Plunkr更新示例。

首先，你误用了ui-sref：

<a ui-sref="work.details({workId: work.id})">

work.details是一个状态，括号中的对象是传递给由其键解析的状态的数据，作为状态的url参数占位符（简而言之：workId对象中的键转换为{{ 1}}在网址中。

其次，我通过删除一些不相关的依赖项来修复你的例子。

最后但并非最不重要的是，州定义现在如下：

:workId

请参阅documentation on Multiple Named Views以更好地了解此主题。

Angular ui路由器嵌套的ui-views显示空白

1 个答案: