AngularJS - перейти к указанному c разделу страницы с идентификатором - PullRequest
Новая
       6

AngularJS - перейти к указанному c разделу страницы с идентификатором

0 голосов
/ 14 января 2020

Я хотел бы сделать что-то подобное (https://jsfiddle.net/326f44xu/), но в итоге это не работает. Моя контактная кнопка предположительно ссылается на раздел страницы. Пожалуйста, помогите.

Вот мой индекс. html код: 

<script type="text/javascript" src="template/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="template/framework/angular/angular.min.js"></script>
<script type="text/javascript" src="template/framework/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="template/framework/angular/angular-route.min.js"></script>

</head>
<body ng-app="kkwApp">
        <div>
            <a href="/#!/contact">Contact</a>
            <a href="/#!/about">About</a>
            <a href="/#!/home">Home</a>
        </div>
    </nav>
        <div class="page {{ pageClass }}" ng-view></div>
</body>
<script type="text/javascript" src="template/js/app.js"></script>
</html>

Вот мое приложение. js, я пробовал много раз, но все еще не работает. 

//ANGULARJS START

var animateApp = angular.module('kkwApp', ['ngRoute', 'ngAnimate']);

animateApp.controller('pagecontactController', function ($scope, $anchorScroll, $location, anchorname) {

console.log(anchorname)
$location.hash('kkwContact');
$anchorScroll();
});

animateApp.config(function($routeProvider) {
    $routeProvider

        .when('/home', {
            templateUrl: 'template/pages/page-home.html',
            controller: 'mainController'
        })

        .when('/about', {
            templateUrl: 'template/pages/page-about.html',
            controller: 'pageaboutController'
        })

        .when('/contact', {
            templateUrl: 'template/pages/page-about.html',
            controller: 'pagecontactController',
            resolve: {
                anchorname: function(){
                return 'kkwContact';
              }
            }
        })

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

});

animateApp.controller('mainController', function($scope) {
    $scope.pageClass = 'page-home';
});

animateApp.controller('pageaboutController', function($scope) {
    $scope.pageClass = 'page-about';
});

animateApp.controller('pagecontactController', function($scope) {
    $scope.pageClass = 'page-contact';
});


//ANGULARJS END

Вот моя страница-о. html, кнопка контакта предположительно ссылка на раздел. 

    <div ng-controller="">
<p>Some text here <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <div id="kkwContact">
                <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </h2>
        </div>
    </div>
...