Angularjs - multiple directives nested on the same page - javascript

I just started working with AngularJs and am having some problems in the management of multiple directives.
The two directives have to perform the following tasks:
1) Create an animation when the page is loaded with animated
2) Create a background parallax on some div
Through some resources found on the net I could get aa two directives that individually work well, but if I try to make them work together with the outer one prevents the internal directives to do their jobs.
This is the code(html):
<div ng-view ng-controller="MyCtrl" anim-class>
<section parallax-background parallax-ratio="0.5" style="background: url(img/parallax1.jpg);">
//some code
</section>
</div>
This is the code(js):
var app = angular.module("myApp", [
"ngRoute",
"ngAnimate",
]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider.
when("/first-page", {
templateUrl: "first-page.html",
animate: "slideTop"
}).
when("/second-page", {
templateUrl: "second-page.html",
animate: "slideTop"
}).
otherwise({
redirectTo: "/first-page"
});
});
app.controller("MyCtrl", function($scope) {
});
// PAGE ANIMATE DIRECTIVE
app.directive('animClass',function($route){
return {
link: function(scope, elm, attrs){
var enterClass = $route.current.animate;
elm.addClass(enterClass)
scope.$on('$destroy',function(){
elm.removeClass(enterClass)
elm.addClass($route.current.animate)
})
}
}
});
// PARALLAX DIRECTIVE
app.directive('parallaxBackground', ['$window', function($window) {
return {
restrict: 'A',
transclude: true,
template: '<div ng-transclude></div>',
scope: {
parallaxRatio: '#',
},
link: function($scope, elem, attrs) {
var setPosition = function () {
var calcValY = (elem.prop('offsetTop') - $window.pageYOffset) * ($scope.parallaxRatio ? $scope.parallaxRatio : 1.1 );
// horizontal positioning
elem.css('background-position', "50% " + calcValY + "px");
};
// set our initial position - fixes webkit background render bug
angular.element($window).bind('load', function(e) {
setPosition();
$scope.$apply();
});
angular.element($window).bind("scroll", setPosition);
angular.element($window).bind("touchmove", setPosition);
} // link function
};
}]);
How can I make sure that the two ( or more ) directives are working properly .
Thank You.

Related

Displaying constants within directive view after successfully injecting

question regarding constants within angularjs. I have the following constants created within app.js:
... angular
.module('blocTime', ['firebase', 'ui.router'])
.config(config)
.constant('STOP_WATCH', {
"workTime": 1500,
"breakTime": 300
});
})();
I've injected the constant inside my directive as follows:
(function() {
function clockTimer($interval, $window, STOP_WATCH) {
return {
templateUrl: '/templates/directives/clock_timer.html',
replace: true,
restrict: 'E',
scope: {},
link: function(scope, element, attributes) {
console.log(STOP_WATCH.workTime); ...
...
angular
.module('blocTime')
.directive('clockTimer', clockTimer);
I can console log the constant from my directive just fine. However, my view is not rendering the constant. HTML:
<div>
<div class="stop-watch">{{ STOP_WATCH.workTime }}</div>
It comes back as undefined. Thoughts as to why or how to make it display in the view? Thanks
Figured it out. Within my directive I had to add scope.STOP_WATCH = STOP_WATCH:
(function() {
function clockTimer($interval, $window, STOP_WATCH) {
return {
templateUrl: '/templates/directives/clock_timer.html',
replace: true,
restrict: 'E',
scope: {},
link: function(scope, element, attributes) {
scope.STOP_WATCH = STOP_WATCH;
...

Angular Js Animate function in custom directive

Here is the application code:
(function(){
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'home.html'
})
.when('/about', {
templateUrl: 'about.html'
})
.when('/contact', {
templateUrl: 'contact.html'
})
.otherwise({
templateUrl: 'home.html'
})
})
myApp.directive('menuRight', function(){
return {
restrict: 'E',
replace: true,
templateUrl: 'menu.html',
link: function(scope, elem, attrs) {
var mB = document.getElementsByClassName('menuBtn');
var m = document.getElementsByClassName('menu');
var menu = angular.element(m);
var menuButton = angular.element(mB);
menu.css({
"left": -100 + "px"
});
menuButton.click(function(){
if(menu.hasClass('visible')) {
menu.animate({'left': -100 + 'px'}, 200).removeClass('visible');
} else {
menu.animate({'left': 0}, 400).addClass('visible');
}
});
}
}
})
})()
The index file has three tags:
<div ng-view></div>
<button class="menuBtn">Toggle Menu</button><br><br>
<menu-right></menu-right>
This code is working fine.
Running Plunker link:
http://plnkr.co/edit/Q7VO0RZstMBwQzH613an?p=preview
This code is doing two things.
1. Loading a custom directive which is displaying the menu.
2. Routing to 3 pages home, about, contact through that directive.
Now above the custom directive there is a Toggle button that is sliding the menu from left. That is done through link function using jquery.
This directive is using jquery to do slide effect.
Now my Question is:
I would like to improve this code. Using angular Animate.
Or using controller in directive.
There is an active class applied to first li inside the menu template. But when I click on other li tags from menu I need to change the active class from/to the clicked li.
Looking for some great answers from great community.
Thanks...

My Angular ui modal cant find the template

here is my app , trying to use UI modal, but when the modal function cant find the html template. i can console log inside the function, but cant open a modal view.
var app = angular.module('myApp', [
'angularUtils.directives.dirPagination',
'ui.bootstrap'
]);
app.controller('galleryCtrl', ['$scope', '$http', function ($scope, $http) {
}]).
controller('ModalInstanceCtrl',['$scope','$modal',function($scope, $modalInstance){
}]).
directive('myGallery', function ($http,$modal) {
return {
restrict: 'E',
scope: {
feed: '#',
search: '=?',
resultsPerPage: "=?",
sorting: "=?"
},
templateUrl: './MyGallery.tpl.html',
link: function (scope, element, attrs) {
scope.search = scope.search || true;
scope.sorting = scope.sorting || true;
scope.resultsPerPage = scope.resultsPerPage || 10;
console.log(scope.resultsPerPage);
scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: '/views/modal.html',
controller: 'ModalInstanceCtrl'
});
};
in the html:
<div class="imgs">
<ul>
<li dir-paginate="img in imgs
| filter:query
| itemsPerPage: resultsPerPage.value || 10 ">
<img ng-src="{{img.url}}" ng-click="openModal()">
</li>
</ul>
</div>
and this is what i get :
GET http://localhost:63342/views/modal.html 404 (Not Found)
the path is 100% correct , so if u guys can see what is the problem.
Just to make sure.. try:
templateUrl: 'views/modal.html',
Maybe your local server's document root it's not where you think it is.
Getting rid of the initial slash you make sure the path is relative to the root folder of your angular project.

AngularJS: Watch a property of the parent scope

I'm quite new to AngularJS and I'm trying to understand a few things.
First of all, I have my controller of which I will place a snippet here:
var OfficeUIRibbon = angular.module('OfficeUIRibbon');
// Defines the OfficeUIRibbon controller for the application.
OfficeUIRibbon.controller('OfficeUIRibbon', ['$scope', '$http', function($scope, $http) {
var ribbon = this;
ribbon.setApplicationMenuAsActive = function() {
ribbon.applicationMenuActive = true;
}
}
Then I have a directive:
var OfficeUIRibbon = angular.module('OfficeUIRibbon');
OfficeUIRibbon.directive('ribbonApplicationMenu', function() {
return {
restrict: 'E',
replace: false,
scope: {
data: '#'
},
templateUrl: function(element, attributes) {
return attributes.templateurl;
}
}
});
The directive is called like this:
<ribbon-application-menu templateUrl="/OfficeUI.Beta/Resources/Templates/ApplicationMenu.html" data="/OfficeUI.Beta/Resources/JSon/Ribbon/ribbon.json"></ribbon-application-menu>
This does all work and in my template for the directive, the following is placed:
<div id="application" id="applicationMenuHolder" ng-controller="OfficeUIRibbon as OfficeUIRibbon" ng-show="OfficeUIRibbon.applicationMenuActive"...
From inside another element, when I execute a click a function on my controller is executed:
ng-click="OfficeUIRibbon.setApplicationMenuAsActive()"
Here's the directive from the other element:
OfficeUIRibbon.directive('ribbon', function() {
return {
restrict: 'E',
replace: false,
scope: {
data: '#'
},
templateUrl: function(element, attributes) {
return attributes.templateurl;
}
}
});
This function does change the property "applicationMenuActive" on the ribbon itself, which should make the item in the directive template show up.
However, this is not working. I'm guessing I need to watch this property so the view get's updated accordingly.
Anyone has an idea on how this could be done?

AngularJS how to create a reusable template for Bootstrap modal

So I am using the AngularJS Bootstrap modal (http://angular-ui.github.io/bootstrap/). Which is working fine but I was wondering if I could create a basic template that can take in a title and the content.
Then it would populate my template with these info. The template would have a close button, cancel button, overlay, etc. Is there an easy way to do this AngularJS?
This is taken from the example and it's about what I have. My content is in the templateUrl. It would be nice to pass in the modal template so I don't have to keep recreating the title and close buttons for every modal I create.
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
Found a way to do it with directives. It opens up a modal with a custom directive that has a template. Then whatever you have in your modal will be inserted into your custom template. This is nice because it holds more than just a message. It can be filled with forms, alert, or anything you want.
This was my directive:
app.directive('modalDialog', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
link: function(scope) {
scope.cancel = function() {
scope.$dismiss('cancel');
};
},
template:
"<div>" +
"<div class='modal-header'>" +
"<h3 ng-bind='dialogTitle'></h3>" +
"<div ng-click='cancel()'>X</div>" +
"</div>" +
"<div class='modal-body' ng-transclude></div>" +
"</div>"
};
});
Modal ('yourTemplate.html'):
<modal-dialog>
<div> Your body/message </div>
</modal-dialog>
Javascript:
app.controller('YourController', ['$scope', '$modal', function($scope, $modal) {
$scope.openModal = function () {
$modal.open({
templateUrl: 'yourTemplate.html',
controller: ModalController
});
};
}]);
var ModalController = function ($scope, $modalInstance) {
$scope.dialogTitle = 'Your title';
};
Checkout John Papa's Hot Towel Angular BootStrap "template". You can pick it up from there:
https://github.com/johnpapa/HotTowel-Angular/blob/master/NuGet/HotTowel-NG/app/common/bootstrap/bootstrap.dialog.js

Categories

Resources