ng-click and ngRouting on mobile devices

Question

I am completely new to Angularjs and haven’t been doing any code for ages. I started setting up my website again with Angularjs. I have a main page and an about page, to which the user gets via ngRoute on ng-click (or hitting space). Once on the about page, the user can go back by clicking somewhere on the page and so on.

App.js

   var app = angular.module("MyApp", ["ngRoute"]);
   app.config(function($locationProvider, $routeProvider) {
       $routeProvider
       .when("/teaser", {
           controller:"teaserCtrl",
           templateUrl:'teaser.html'
       })
       .when("/about", {
           controller:"aboutCtrl",
           templateUrl: "about.html"
       })
       .otherwise({
           redirectTo:"/teaser"
       })
    });

    app.controller("mainCtrl", function($scope, $http, $location) {
        $scope.v = {
            inverted: false,
            display: true,
            offwhite: true,
        }

        $scope.$on("space", function() {
            if ($scope.v.teaser) {
                $location.path("/about")
                $scope.v.teaser = false
            } else {
                $location.path("/teaser")
                $scope.v.teaser = true
            } 
            $scope.$apply()
        })

        $scope.goHome = function(){
            $scope.$broadcast("goHome")
        }
    });

    app.directive("ngMobileClick", [function () {
        return function (scope, clickElement, attrs) {
            clickElement.bind("touchstart click", function (e) {
                e.preventDefault();
                e.stopPropagation();

                scope.$apply(attrs["ngMobileClick"]);
            });
        }
    }])

HTML

    <body ng-controller="mainCtrl as main" ng-mobile-click="goHome()" ng-class="{inverted: v.inverted, bg: v.offwhite}" space>
        <div class="content" ng-view ng-hide="v.display"></div>
    //My body code

        <script ng-init="sw = 'some website'; id="about.html" type="text/ng-template">
            <div class="about">
                <p class="text" ng-click="next(); $event.stopPropagation()">
                <p>some text</p>
                <br>
                <a ng-href="{{mail}}" ng-click="$event.stopPropagation()">some address</a>
                </p>
            </div>
        </script>
    </body>

The code for the about page is written into a script and it has hyperlinks (ng-href). Now my issue: As you can see, I changed my ng-click to ng-mobile-click for the body-section. If I also change it in the script for the hyperlinks, something weird is happening which I can’t really figure out (links change to hover color, but still no redirection to the ng-href.

For the desktop version, the click is triggering ngRoute, but I can also click the links. For the mobile version this is not possible any more. Any ideas how I can fix this? I know, there is no hovering possible, but somehow I need to detect the hyperlinks also on mobile devices without being redirected to the main-page.

As I said: this is my first try with Angularjs and I haven’t done any code for a while, please be as clear as possible!

There is another controller for teaser/about which I haven’t put here, as well as the directive for the keyup.

Any ideas or suggestions? Thank you so much in advance!

ng-click and ngRouting on mobile devices

0 Answers0