Question

当我包含参数时，我无法从角度加载我的模板。

主页面模板有一个无序列表，它应该指向适当的“factorDetails”路由。如果我使用没有参数的路径设置主模板

main.html中

<ul>
    <li ng-repeat="factor in factors">
        <span class="result-list-name">
            <a ng-href="/factorDetails">
                {{factor.FactorName}}
            </a>
        </span> 
    </li>
</ul>

和我的角度文件一样

main.js
var app = angular.module('mainApp',['ngRoute'])

.config(
  function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/main.html',
        controller: 'totalListCtrl'
       }).
       when('/factorDetails', {
        templateUrl: 'partials/details.html',
        controller: 'detailsCtrl'
        });
    $locationProvider.html5Mode(true);
});

app.controller('totalListCtrl', function($scope, $http){

    $http({method: 'get', url: '/api/allfactors'})
        .success(function(data, status, headers, config){
            $scope.factors = data;
            $scope.factorCount = Object.keys(data).length;
        })
        .error(function(data, status, headers, config){
            $scope.factors = {dummyfactor:{"factorname":"there was an error loading data"}};

        });
});

app.controller('detailsCtrl', function($scope, $routeParams){

        $scope.displayID = $routeParams;
});

我可以在加载我的details.html模板时看到测试和一个空的displayID（因为我没有在我的URL中添加任何参数），所以一切都很好。

<div>
    <h1>{{displayID}}</h1>
    <h1>test</h1>
</div>

浏览器中的输出是：

{}
test

但是，如果我现在进行以下更改：

main.html中

<ul>
    <li ng-repeat="factor in factors">
       <span class="result-list-name">
        <a ng-href="/factorDetails/{{factor.FactorID}}">
            {{factor.FactorName}}
        </a>
       </span> 
    </li>
</ul>

main.js

var app = angular.module('mainApp',['ngRoute'])

.config(
  function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/main.html',
        controller: 'totalListCtrl'
       }).
       when('/factorDetails/:FactorID', {
        templateUrl: 'partials/details.html',
        controller: 'detailsCtrl'
        });
    $locationProvider.html5Mode(true);
});

...etc.

现在我的结果是，甚至没有加载details.html模板，页面仍保留在main.html上。但是，根据我点击的链接，网址会更改为localhost/factorDetails/1和factorDetails/2。

任何帮助都会非常感激，绝对感觉被困在这里。或者感觉像装载AngularUI一样希望能够发挥作用。

Answer 1

好吧，我没弄清楚为什么$ locationProvider不工作，但我确实使用了AngularUI。这里有一个很好的教程：

http://www.ng-newsletter.com/posts/angular-ui-router.html

对于可能遇到此问题的人，相关更改如下

main.html中

<ul >
    <li ng-repeat="factor in factors">
        <span class="result-list-name">
            <a ui-sref="factorDetails({FactorID: {{factor.FactorID}}})">
             {{factor.FactorName}}
                </a>
        </span> 
    </li>
</ul>

main.js

var app = angular.module('mainApp',['ui.router'])

.config(function($stateProvider, $urlRouterProvider) {
  //$urlRouterProvider.when('', '/');
  $stateProvider
      .state('main', {
        url: '',
        templateUrl: 'partials/main.html',
        controller: 'totalListCtrl'
       })
       .state('factorDetails', {
        url: 'factorDetails/:FactorID',
        templateUrl: 'partials/details.html',
        controller: 'detailsCtrl'
        })
});

app.controller('totalListCtrl', function($scope, $http){

    $http({method: 'get', url: '/api/factorsMainPage'})
        .success(function(data, status, headers, config){
            $scope.factors = data;
            $scope.factorCount = Object.keys(data).length;
        })
        .error(function(data, status, headers, config){
            $scope.factors = {dummyfactor:{"factorname":"there was an error loading data"}};

        });
});

app.controller('detailsCtrl', function($scope, $stateParams, $http){

    $http({method: 'get', url: ('/api/factorDetails/' + $stateParams.FactorID) })
        .success(function(data, status, headers, config){
            $scope.factor = data.factor1;
        })
        .error(function(data, status, headers, config){
            $scope.factor = {dummyfactor:{"factorname":"there was an error loading data"}};
        });

    $scope.displayID = $stateParams.FactorID;

});

角度模板未加载参数

1 个答案: