如何在不是由点击事件触发时停止重定向到页面

Question

我正在尝试使用 angular js 开发单页 Web 应用程序。现在，当我单击 AddFilm 按钮时，它会重定向到 AddNewFilm.html，其中将显示一条消息，并且按钮将隐藏在当前视图中，对于路由，我使用了 $routeProvider，但问题是当我手动键入 url作为 http://localhost:8088/fms/#/AddNewFilm 显示消息和按钮。

我的问题是我们能否在 myApp.config 或 myApp.controller 中指定条件，以便仅在单击按钮时路由到 url。

Welcome.html 是

<!doctype html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>Film Management System</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="login.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
        <script src="app.js"></script>
    </head>

    <body ng-app="myApp" background='bg1.JPG'>
        <img src='bg.png' width="1270" height="222"/>

        <div ng-controller="myCtrl">
            <a href="#/AddNewFilm" class="addfilm_buttton button1" ng-click="action.addFilm()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm  || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor  || action.buttonClicked.getAllActors">Add film</a>

            <a href="#/ModifyFilm" class="modifyfilm_buttton button1" ng-click="action.modifyFilm()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm  || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor  || action.buttonClicked.getAllActors">Modify  Film</a>

            <a href="#/ModifyFilm" class="searchfilm_buttton button1" ng-click="action.searchFilm()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm  || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor  || action.buttonClicked.getAllActors">Search Film</a>

            <a href="#/ModifyFilm" class="removefilm_buttton button1" ng-click="action.removeFilm()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm  || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor  || action.buttonClicked.getAllActors">Remove Film</a>

            <a href="#/ModifyFilm" class="viewallfilms_buttton button1" ng-click="action.getAllFilms()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm  || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor  || action.buttonClicked.getAllActors">View All Films</a>

            <a href="#/ModifyFilm" class="addactor_buttton button1" ng-click="action.addActor()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm  || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor  || action.buttonClicked.getAllActors">Add Actor</a>

            <a href="#/ModifyFilm" class="modifyactor_buttton button1" ng-click="action.modifyActor()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm  || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor  || action.buttonClicked.getAllActors">Modify Actor</a>

            <a href="#/ModifyFilm" class="searchactor_buttton button1" ng-click="action.searchActor()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm  || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor  || action.buttonClicked.getAllActors">Search Actor</a>

            <a href="#/ModifyFilm" class="removeactor_buttton button1" ng-click="action.removeActor()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm  || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor  || action.buttonClicked.getAllActors">Remove Actor</a>

            <a href="#/ModifyFilm" class="viewallactors_buttton button1" ng-click="action.getAllActors()" ng-hide="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm  || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor  || action.buttonClicked.getAllActors">View All Actors</a>

            <a href="#/" class="show_buttton button1" ng-click="showButtons()" ng-show="action.buttonClicked.addFilm || action.buttonClicked.modifyFilm || action.buttonClicked.searchFilm || action.buttonClicked.removeFilm  || action.buttonClicked.getAllFilms || action.buttonClicked.addActor || action.buttonClicked.modifyActor || action.buttonClicked.searchActor || action.buttonClicked.removeActor  || action.buttonClicked.getAllActors">Home</a>

        <div ng-view></div>

        </div>
    </body>
</html>

app.js

var myApp = angular.module('myApp', ['ngRoute']);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('myCtrl', function($scope,$window) 
{
    $scope.showButtons = function() 
    {
        $scope.action.buttonClicked.addFilm = false
        $scope.action.buttonClicked.modifyFilm = false
        $scope.action.buttonClicked.searchFilm = false
        $scope.action.buttonClicked.removeFilm = false
        $scope.action.buttonClicked.getAllFilms = false
        $scope.action.buttonClicked.addActor = false
        $scope.action.buttonClicked.modifyActor = false
        $scope.action.buttonClicked.searchActor = false
        $scope.action.buttonClicked.removeActor = false
        $scope.action.buttonClicked.getAllActors = false
    }

    $scope.action = 
    {
            buttonClicked: {},
            addFilm: function()
            {
                $scope.action.buttonClicked.addFilm = true
            },
            modifyFilm: function()
            {
                $scope.action.buttonClicked.modifyFilm = true
            },
            searchFilm: function()
            {
                $scope.action.buttonClicked.searchFilm = true
            },
            removeFilm: function()
            {
                $scope.action.buttonClicked.removeFilm = true
            },
            getAllFilms: function()
            {
                $scope.action.buttonClicked.getAllFilms = true
            },
            addActor: function()
            {
                $scope.action.buttonClicked.addActor = true
            },
            modifyActor: function()
            {
                $scope.action.buttonClicked.modifyActor = true
            },
            searchActor: function()
            {
                $scope.action.buttonClicked.searchActor = true
            },
            removeActor: function()
            {
                $scope.action.buttonClicked.removeActor = true
            },
            getAllActors: function()
            {
                $scope.action.buttonClicked.getAllActors = true
            }
    }
  $scope.message =
  {
            modifyFilm: 'Hello from ModifyFilm',
            addFilm: 'Hello from AddNewFilm',
            searchFilm: 'Hello from searchFilm',
            removeFilm: 'Hello from removeFilm',
            getAllFilms: 'Hello from getAllFilms',
            modifyActor: 'Hello from ModifyActor',
            addActor: 'Hello from AddNewActor',
            searchActor: 'Hello from searchActor',
            removeActor: 'Hello from removeActor',
            getAllActors: 'Hello from getAllActors'
  };
});

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

      .when('/AddNewFilm', {
        templateUrl : 'AddNewFilm.html',
        controller  : 'myCtrl'
      })

      .when('/ModifyFilm', {
        templateUrl : 'ModifyFilm.html',
        controller  : 'myCtrl'
      })

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

AddNewFilm.html

<div align="center">
<h1>ModifyFilm</h1>

<h3>{{message.addFilm}}</h3>
</div>

可以在 https://plnkr.co/edit/RXkFAw3Z1ehlt8rJZa5W?p=info

Answer 1

是的，当myCtrl位置发生变化并且没有任何点击按钮时，您只需要重定向到主页：

myApp.controller('myCtrl', function($scope,$window,$location) 
{
    // watch for location changing
    $scope.$on('$locationChangeStart', function() {
        var d = $scope.action.buttonClicked;

        // if there isn't any clicked button
        if (!Object.keys(d).map(function(k) { return d[k]; }).some(angular.identity)) {
            // redirect to main page
            $location.url('/');
        }
    });

    ...
}

并且您不应在 when 语句中将 myCtrl 指定为控制器。错了。

如何在不是由点击事件触发时停止重定向到页面

How to stop the redirecting to a page when it was not triggered by an click event

html

javascript

java

angularjs

angularjs-ng-route