Question

在我看来，我正在输出链接。当我单击一个链接时，它会在我的routeProvider中触发另一个方法，并最终重定向回到主页。我需要它来重定向indiv id，我需要能够从我的控制器中查看project.id。我可以请一些帮助。我有点卡住了。

我的观点：

<div class="container clearfix">
    <div class="pagename sixteen columns fadeInUp animated">
        <h1 style="font-family: Merriweather">Portfolio</h1>
    </div>
</div>
<div class="container clearfix" ng-controller="portfolioController">
            <ul style="padding-left: 20pt" class="large-block-grid-4 align-center">
            <li class="part" ng-repeat="project in projects">
                <a href="#/indiv?id={{ project.id }}">
                    <img src="{{ project.screenshot_uri }}" alt="">
                </a>
                <br><br>
                <h4>{{ project.project_name }}</h4>
                <p>{{ project.description }}</p>
            </li>
            </ul>
</div><br><br>

我的应用数据：

var app = angular.module("app", ['ngRoute']).config(function($httpProvider, $routeProvider) {

  $routeProvider.when('/home', {
        templateUrl: 'index.php/projects/projects/home',
        controller: 'homeController'
    });
  $routeProvider.when('/portfolio', {
    templateUrl: 'index.php/projects/projects/portfolio',
    controller: 'portfolioController'
  });
  $routeProvider.when('/indiv:id', {
    templateUrl: 'index.php/projects/projects/indiv',
    controller: 'indiv_controller'
  });
  $routeProvider.when('/contact', {
    templateUrl: 'index.php/projects/projects/contact',
    controller: 'contactController'
  });

    $routeProvider.otherwise({ redirectTo: '/home' });
});

app.factory('pull_projects', function($http) {
  return {
    get_projects: function(callback) {
      $http.get('index.php/projects/pull_projects').success(callback);
    }
  };
});

app.controller('portfolioController', function($http, $location, $scope, pull_projects) {
    pull_projects.get_projects(function(results) {
      $scope.projects = results;
  });
});

app.controller('contactController', function($http, $location, $scope) {
});

app.controller('indiv_controller', function($http, $location, $scope, $routeParams) {
  alert($routeParams.id);
});

app.controller('homeController', function($http, $location, $scope) {
});

Answer 1

似乎问题是您正在定义角度路由网址，并且标记中的网址略有不同。

<强>路线：
在路线网址中，您定义的是/indiv:id。但是，这会匹配一个url，其中id是indiv部分的一部分。所以，http://host/indiv123。

所以，我建议将其更改为：/indiv/:id。然后，这将匹配以下网址：http://host/indiv/123。

<强>标记：
在HTML中，您将网址声明为#/indiv?id={{ project.id }}。这将生成网址：/indiv?id=123。

要匹配我们的新角度路线，我们需要将模板设为#/indiv/{{ project.id }}，以便我们生成类似/indiv/123的网址。

希望这有帮助。

Answer 2

您应该使用：

ng-href="#/indiv?id={{ project.id }}"

而不是

href="#/indiv?id={{ project.id }}"

这可确保{{project.id}}在用作链接之前得到正确解析。

这是因为在浏览器尝试解析href和src（＆lt; img src =“”＆gt;）属性之前，Angular并不总是有机会拦截数据绑定请求。因此，您应该使用ng-src图像。

angularJv中的routeProvider无法正常工作

2 个答案: