Skip to content

Instantly share code, notes, and snippets.

@shmdhussain

shmdhussain/app.js

Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shmdhussain/c802c7a59c78d8e498da to your computer and use it in GitHub Desktop.
Save shmdhussain/c802c7a59c78d8e498da to your computer and use it in GitHub Desktop.
Download ZIP
Angular Directive Demo Issue
Raw
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'
});
});
Raw
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;
});
Raw
default.html
<p><a href="#/p1">page 1</a></p>
<p><a href="#/p2">page 2</a></p>
Raw
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>
Raw
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>
Raw
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>
<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>
<p>In Page Two</p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment