AngularJS问题:路由后第二页未调用指令

AngularJS issue: Directive not called on Second Page after Routing

本文关键字：二页 指令 调用 问题 路由 AngularJS      更新时间：2023-09-26

我正在开发一款angular应用程序

我正在绑定角度指令mytoggle来切换页面中的内容，但如果我通过角度路由转到第二个页面，则切换仅在第一个页面上起作用，不会调用相同的指令，因此切换也不起作用。

我创建了一个要点，要点链接网址：https://gist.github.com/shmdhussain/c802c7a59c78d8e498da

Index.html:

<html xmlns:ng="http://angularjs.org" lang="en" id="ng-app" ng-app="myApp">
        <head>
            <meta charset="utf-8">
            <title>Angular App</title>
            <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular-route.js"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <script src="app.js"></script>
            <script src="js/controllers/ctrl.js"></script>
            <style type="text/css">
                .show{display:none}
            </style>
        </head>
        <body>
            <div ng-controller="parentCtrl" class="">
                <div ng-view>
                </div>
            </div>
        </body>
    </html>

默认.html

<p><a href="#/p1">page 1</a></p>
<p><a href="#/p2">page 2</a></p>

Page1.html:

<div>
    <p mytoggle class="toggle">Toggle ME Page 1</p>
</div>
<div class="show">
    <p>In Page One</p>
    <p>In Page One</p>
    <p>In Page One</p>
    <p>In Page One</p>
    <p>In Page One</p>
    <p>In Page One</p>
    <p>In Page One</p>
    <p>In Page One</p>
</div>

Page2.html:

<div>
    <p mytoggle class="toggle">Toggle ME Page2</p>
</div>
<div class="show">
    <p>In Page Two</p>
    <p>In Page Two</p>
    <p>In Page Two</p>
    <p>In Page Two</p>
    <p>In Page Two</p>
    <p>In Page Two</p>
</div>

app.js:

// Create a new module
var myApp = angular.module('myApp', ['ngRoute']);
// register a new service
//myApp.value('appName', 'MyCoolApp');
// configure existing services inside initialization blocks.
myApp.config(function($locationProvider,$routeProvider) {
    $routeProvider
    .when('/p1', {
      templateUrl:'partials/page1.html'
    })
    .when('/p2', {
       templateUrl:'partials/page2.html'

    })
    .when('/default', {
      templateUrl:'partials/default.html'
    .otherwise({
      redirectTo:'/default'
    });

});

ctrl.js:

myApp.controller('parentCtrl',['$scope','$window','$location',function ($scope,$window,$location) {

}]);
myApp.directive('mytoggle',function(){
    console.log("inside dir");
    //ALERTS    
    jQuery(".toggle").click(function (e) { 
        console.log("ddd");
        console.log("class names: "+jQuery(e.target).attr('class'));
        jQuery(".show").slideToggle("slow");
    });
    return true;
});

myApp.directive('mytoggle', function() {
  // The injecting function of the directive.
  // Executed only once for the entire app (if the directive is used).
  console.log('Injecting function says hello.');
  // Simplest form of returning postLink function
  return function postLink() {
    // The postLink function of the directive.
    // Executed once per instance of the directive, each time it's rendered.
    console.log('postLink says hello.');
    jQuery(".toggle").click(function(e) {
      jQuery(".show").slideToggle("slow");
    });
  };
});

如果你想把它作为一个指令，我至少建议如下：

myApp.directive('mytoggle', function() {
  return {
    restrict: 'A',
    link: function postLink(scope, element, attrs) {
      var onClick = function() {
        $('.show').slideToggle("slow");
      };
      element.on('click', onClick);
      scope.$on('$destroy', function() {
        element.off('click', onClick);
      });
    }
  };
});
相关文章：