Question

路由更改事件在初始页面加载本身被触发，理想情况下，我想在用户从初始页面进入下一页而不是在初始页面加载时触发。

在这里，我遵守了指令＆＃34; meeee＆＃34;对于元素和指令的link函数，我把routeChangeStart的回调事件

我想在其中触发回调以使用指令＆＃34; meeee＆＃34;从当前页面中删除元素。当用户进入下一页时。但是＆＃34; routeChangeStart＆＃34;触发当前页面本身的事件，删除所有＆＃34; meeee＆＃34;初始加载本身的元素，

请参阅此plunkr代码http://plnkr.co/edit/h7nLME7YW7dI8qaBk1in?p=preview

的index.html

<!DOCTYPE html>
<html id="ng-app" ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src=" https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script>
    <script src="app.js"></script>
  </head>

  <body>
            <div ng-controller="parentCtrl" class="">

                <div ng-view>

                </div>

            </div>
            <div id="d1-Me1" class="meeee">
                Meee1
            </div>
            <div id="d1-Me2" class="meeee">
                Meee2
            </div>

            <div id="d1-Me3" class="meeee">
                Meee3
            </div>
        </body>

</html>

App.js

var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('parentCtrl',['$scope','$window','$location',function ($scope,$window,$location) {


}]);
myApp.config(function($locationProvider,$routeProvider) {
    $routeProvider
    .when('/p1', {
      templateUrl:'page1.html',
    })
    .when('/p2', {
       templateUrl:'page2.html',
    })
    .when('/p3', {
      templateUrl:'partials/page3.html',
    })
    .when('/default', {
      templateUrl:'default.html',
    })
    .otherwise({
      redirectTo:'/default'
    });
});

myApp.directive("meeee",['$rootScope','$location', function ($rootScope, $location){
    return {
        restrict: 'C',
        link: function(scope, elm, attr) {
            $rootScope.$on('$routeChangeStart', function() {
                console.log('attr["id"]: '+attr["id"]);
                elm.remove();
            });
            elm.detach();
            angular.element("body").append(elm);
        }
    };
}]);

default.html中

<a href="#/p1">
    Page1
</a>
<br>
<br>
<a href="#/p2">
    Page2
</a>
<br>
<br>
<a href="#/p3">
    Page3
</a>

Page1.html

在第一页

<div id="p1-Me1" class="meeee">
    Page 1 Meee1
</div>
<div id="p1-Me2" class="meeee">
    Page 1 Meee2
</div>

<div id="p1-Me3" class="meeee">
    Page 1 Meee3
</div>

page2.html

<p>In Page Two</p>

page3.html

<p>In Page Three</p>

提前感谢您的帮助。

Answer 1

添加一个计数器，如果它是第一个页面加载，它不适用？

在初始index.html页面加载时触发RouteChangeStart事件

1 个答案: