The route change event is fired on the initial page load itself, ideally i want to fire when the user go to the next page from the initial page not on the initial page load.
Here I have bound the directive "meeee" to the elements and in the link function of the directive I put the callback for routeChangeStart
event.
In which I want to fire the callback to remove the elements from the current page with directive "meeee" when user goes to the next page.
But "routeChangeStart" event is fired for the current page itself, removing all the "meeee" elements at the initial load itself ,
please see this plunkr code 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
In Page One
<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>
Thanks in advance for any help.
Add a counter so that if it this the first pageload, it doesn't apply?
Related
I have two elements, only one of them is supposed to show up at a time while the other element stays hidden until the visible element is made to disappear (button click), here an example of the last logic I have tried to use.
.......
<div ng-show='show'>
Visible element
<button ng-click='toggle()'> Toggle </button>
</div>
<div ng-hide='show'>
Hidden Element
</div>
.......
And I have something like this in my controller
........
$scope.show = true;
$scope.toggle = function(){
$scope.show =!$scope.show;
}
.........
Now, anytime I click the button, the first element will disappear but the second element will not show. Please I really need help.
You have to put your button out of the ng-show div like this
<div ng-show='show'>
<div>Visible element</div>
</div>
<div ng-hide='show'>
<div>Hidden Element</div>
</div>
<button ng-click='toggle()'> Toggle </button>
then its work fine. Hope this help...
Here is the solution
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.show = true;
$scope.toggle = function(){
$scope.show =!$scope.show;
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-show='show'>
Visible element
</div>
<div ng-hide='show'>
Hidden Element
</div>
<button ng-click='toggle()'> Toggle </button>
</body>
</html>
I am trying to implement close on out side click, the element is closing on outside click, but it closes also on an inside click, it should work like in the example : http://plnkr.co/edit/ybYmHtFavHnN1oD8vsuw?p=preview
I dont understand, why the element.find cant find the target, when it is his child.
HTML Directive
<div class='multiDate'>
<div class="dropdown">
<button data-ng-click="show = !show" class="dropbtn">Press</button>
<div id="myDropdown" ng-show="show" class="dropdown-content">
<multiple-date-picker></multiple-date-picker>
</div>
</div>
</div>
HTML Main
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script data-require="angularjs#1.6.2" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
<script data-require="moment.js#*" data-semver="2.14.1" src="https://npmcdn.com/moment#2.14.1"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://arca-computing.github.io/MultipleDatePicker/stylesheets/multipleDatePicker.css" />
<script src="https://arca-computing.github.io/MultipleDatePicker/javascripts/multipleDatePicker.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="cntrl">
<multi-date></multi-date>
</body>
</html>
JS
var app = angular.module("app", ['multipleDatePicker']);
app.controller("cntrl", function($scope) {
});
app.directive('multiDate', function($document) {
return {
templateUrl: 'multi.html',
replace: true,
link: function(scope, element) {
$document.bind('click', function(event) {
var isClickedElementChildOfPopup = element
.find(event.target)
.length > 0;
if (isClickedElementChildOfPopup)
return;
scope.show = false;
scope.$apply();
});
}
}
});
PLNKR
The directive seems to be fine.
You just need to add $event.stopPropagation to stop outer event.
<multiple-date-picker ng-click="$event.stopPropagation(); dateClickedModelChanged()" day-click="dateClicked" ng-model="dateTimeModel"></multiple-date-picker>
Here is your modified plunker
I am trying to develop a single page web application.In my Welcome.html i had several buttons.when user clicks a button all buttons should vanish and the respective message or any content respective to the clicked button should appear in place of that my
Welcome.html is
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="ISO-8859-1">
<title>Film Management System</title>
<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>
<link rel="stylesheet" href="style.css">
</head>
<body background='bg1.JPG'>
<img src='bg.png' width="1270" height="222"/>
Add New Film
Modify Existing Film
<div ng-view></div>
</body>
</html>
my app.js is
var app=angular.module('myApp',['ngRoute'])
app.config(function($routeProvider) {
$routeProvider
.when('/AddNewFilm', {
templateUrl : 'AddNewFilm.html',
controller : 'AddNewFilm'
})
.when('/ModifyFilm', {
templateUrl : 'ModifyFilm.html',
controller : 'ModifyFilm'
})
.otherwise({redirectTo: '/'});
});
app.controller('AddNewFilm', function($scope) {
$scope.message = 'Hello from AddNewFilm';
});
app.controller('ModifyFilm', function($scope) {
$scope.message = 'Hello from ModifyFilm';
});
AddNewFilm.html
<div align="center">
<h1>AddNewFilm</h1>
<h3>{{message}}</h3>
</div>
ModifyFilm.html
<div align="center">
<h1>ModifyFilm</h1>
<h3>{{message}}</h3>
</div>
</html>
I want to close the popover if the user click outside the popover. in the below code .tried it with few examples that were posted for clicking outside the popover but not working.
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.2.22/angular.js"></script>
</head>
<body ng-app="myApp">
<div class="example" ng-controller="MyCtrl">
<a class="btn btn-lg btn-success" href="javascript:;" popover ng-click="click()">popover</a>
<div style="display:none">
<div class="pop-content" id="val">
{{ myVar }}
<input type="button" />
</div>
</div>
<input ng-model="myVar">
</div>
</body>
</html>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope) {
$scope.myVar = 3 + 4;
})
myApp.directive('popover', function ($compile) {
return {
link: function (scope, element, attrs) {
// define popover for this element
$(element).popover({
html: true,
placement: "top",
// grab popover content from the next element
content: $compile($(element).siblings(".pop-content").contents())(scope)
});
}
}
});
</script>
Seems like you ran into a Twitter bootstrap bug.. see this question here
you need to change you html to allow this feature.
<a class="btn btn-lg btn-success" href="javascript:;" popover ng-click="click()">popover</a>
to
<a popover class="btn btn-lg btn-success" href="javascript:;" tabindex="0" data-trigger="focus" >popover</a>
another problem is that you're not providing the content in JavaScript properly.
$(element).siblings("div").children(".pop-content").contents()
I did this inside you link function.
here is the plunk
Note: now you can't close it with the anchor itself..
-----------Update----------
To achieve this you'll have to do something like this data-trigger="click focus", but by using this I am running into an unusual bug. on first click the popover flick opens and closes immediately..
my angular directive template is not getting loaded into my app. The js file for the directive is loading fine except the html. I checked the 'net' tab in firebug and its not getting called there either. I am currently not getting any errors.
Here is my directive js:
angular.module('Grid')
.directive('grid', function() {
return {
restrict: 'A',
require: 'ngModel',
scope: {
ngModel: '='
},
templateUrl: 'scripts/grid/grid.html'
}
});
Here is my directive html:
<div id="game">
<div class="grid-container">
<div class="grid-cell" ng-repeat="cell in ngModel.grid track by $index"></div>
</div>
<div class="tile-container">
<div tile ng-model="tile" ng-repeat="tile in ngModel.tiles track by $index"></div>
</div>
finally here is my index.html where it is meant to go
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2048</title>
<link rel="stylesheet" type="text/css" href="styles/game.css" />
<script type="application/javascript" src="scripts/libraries/angularjs.js" ></script>
<script type="application/javascript" src="scripts/app.js"></script>
<script type="application/javascript" src="scripts/game/game.js"></script>
<script type="application/javascript" src="scripts/grid/grid.js"></script>
<script type="application/javascript" src="scripts/grid/grid_directive.js"></script>
</head>
<body ng-app="twentyApp">
<!-- header -->
<div class="container" ng-include="'views/main.html'"></div>
<!-- script tags -->
<div id="game-controller">
<div grid ng-model="ctrl.game" class="row"></div>
</div>
</body>
</html>
This has app is being broken up into multiple modules as the new recommended structure for angular
The grid module needs to be a dependency of your twentyApp module.
angular.module('twentyApp', ['grid'])
Are you sure that the Grid module is being loaded?
Try this:
angular.module('Grid', [])
.directive('grid', function() {