Question

我有一个博客文章列表，我希望能够点击标题并让它动态重定向到正确的帖子。

到目前为止，除非我点击锚定标记的标题，否则它会重定向到：

blog/#/post/:post

而不是

blog#/post/:post

我试图将href更改为data-ng-href，使用target =＆＃34; _self＆＃34; 并尝试更改href =＆＃34;＃/ post / {{post}}＆＃34;和href =＆＃34; / post / {{post}}＆＃34;

路线：

(function(){

    'use strict';

    angular.module('ghpg')
    .config(Config); 

    Config.$inject = ['$routeProvider'];

    function Config($routeProvider){

        $routeProvider
            .when('/listing', {
                templateUrl: '/angular/views/listing.client.view.html'
            }).otherwise({
                redirectTo:'/'
            }).when('/post/:title',{
                templateUrl: '/angular/views/post.client.view.html',
                controller: 'postController',
                controllerAs: 'post'
            }).otherwise({
                redirectTo:'/listing'
            });

    }  


})();

列表视图：

    (function(){

    'use strict'; 

    angular
    .module('ghpg')
    .controller('listingController', listingController); 

    listingController.$inject = ['$scope', 'blogContent'];//,'blogContent'] //, 'blogContent'];  


    ////

    function listingController($scope,  blogContent){
        var vm = this;
        vm.articles = [];
        grabData();   

        function grabData(){
            return blogContent.getContent().then(function(data){
                    console.log(data.articles);
                    vm.articles = data.articles;
                    return vm.articles; 
                    },function(err){ 
                console.log(err); 
                vm.data = [];

                }); 
        }

    }


})();

App.js：

(function(){

    'use strict'; 

    var dependencies = [
        'ghpg', 
        'ngRoute'

    ];  

    angular.module('blogger', dependencies)
    .config(Config);  

    Config.$inject = ['$locationProvider'] 

    function Config($locationProvider){

        $locationProvider.hashPrefix('!'); 

    } 

    if (window.location.hash === '#_=_'){
        window.location.hash = '#!'; 

    } 


    //bootstrap angular

    angular.element(document).ready(function(){

        angular.bootstrap(document, ['ghpg']); 

    });



})();

上市视图：

<div class="container-fluid" data-ng-Controller="listingController as vm"> 
    <h2> Listings </h2>     
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-8">      
            <div class="post-listing" data-ng-repeat="post in vm.articles"> 
                <h3 class="article-title"><a target="_self" data-ng-href="/blog#/post/{{post.title}}"> {{ post.title  }} </a></h3>
                <div class="article-container">
                    <div class="article-date"><span class="article-date">{{ post.date }}</span></div>
                    <div class="article-post>"><span class="article-content"> {{ post.content }} </span></div> 
                </div> 
            </div>
        </div>  
    </div>  

</div>

在我出错的地方遇到麻烦。我强烈怀疑它是app.js中我的SPA位置/位置提供者的一些小错字或其他东西，但它在我的其他应用程序中看起来一样，除非我的眼睛愚弄我（这可能完全发生！）

Answer 1

我为修复所做的只是这样：

更改了列表视图的主播：

        <h3 class="article-title"><a target="_self" data-ng-href="/post/{{post.title}}"> {{ post.title  }} </a></h3>

在href中包含/blog#部分，以便我拥有：

    <h3 class="article-title"><a target="_self" data-ng-href="/blog#/post/{{post.title}}"> {{ post.title  }} </a></h3>

简单修复，因为我的网站的博客部分或网页只是angularJS，其他一切都不是这样，路由没有被调用来路由它，直到它看到/blog#作为应用程序的一部分。

AnguarJS路由不按预期工作

1 个答案: