AngularJS問題：指令路由

我開發的角度應用程序後，不叫第二頁上，AngularJS問題：指令路由

我綁定的角度指令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>

default.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; 
});

來源

2014-05-08 Mohamed Hussain

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); 
     }); 
    } 
    }; 
});

來源

2014-05-08 12:59:50 tasseKATT

非常感謝你的幫助。現在它正在工作。之前的問題是我沒有鏈接功能。只是有了指令初始化，只有當指令被初始化時才初次執行。我對嗎？ –

是的，第一次呈現指令的實例。它將在應用程序的每個生命週期中被稱爲最大一次。 – tasseKATT

AngularJS問題：指令路由

回答

相關問題