Develop Reference

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;
...

Angularjs - multiple directives nested on the same page

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.

AngularJS directive not showing template but others working fine

I am trying to add another AngularJS directive to my app but for some reason it is not working. I have added other directives before in the same way but they are all working. I have posted code below.
HTML where I include the directive
<section class="section-wrap" data-ng-controller="PVProfileViewController">
<div class="container bg_white">
<div>
<pv-profile-password-reset pv-user="user"></pv-profile-password-reset>
</div>
<div>
<pv-profile-email-update pv-user="user"></pv-profile-email-update>
</div>
</div>
</section>
AngularJS directive file
'use strict';
/*
* The profile email request update section
*/
angular.module('mean.system').directive('pvProfileEmailUpdate',
['PVProfile', '$timeout', 'Global', 'Utilities',
function (PVProfile, $timeout, Global, Utilities)
{
function controller($scope)
{
$scope.global = Global;
$scope.darkout = false;
}
function link(scope, element, attrs)
{
}
return {
restrict: 'E',
templateUrl: '/path/to/profile_email_update.html',
link: link,
scope: {
user: '=pvUser'
},
controller: controller
};
}
]
);
Any ideas why this specific directive would not be working but others very similar to it would be?

How do I create an active (class) using angular.js

I am using [uikit] and like to utilize their active class on a link. I'd also like to use their icons simultaneously. 1 I am trying to implement this practice, fiddle however I get this error.
Uncaught SyntaxError: Unexpected token .
and
`Uncaught Error: [$injector:modulerr]
Failed to instantiate module rustyApp due to:
Error: [$injector:nomod] Module 'rustyApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.`
This is my HTML:
<section class="top-bar-section uk-navbar-flip" ng-app="link">
<ul class="uk-navbar-nav ">
<li active-link="uk-active"><i class="uk-icon-home uk-icon-medium "> </i>home</li>
<li active-link="uk-active"><i class="uk-icon-photo uk-icon-medium "></i> work</li>
<li active-link="uk-active"><i class="uk-icon-envelope-o uk-icon-medium "></i> contact</li>
</ul>
</section>
// create the module and name it rustyApp
var rustyApp = angular.module('rustyApp', [
'ngRoute',
'viewController',
'mm.foundation',
'angular-flexslider'
])
.controller('BasicSliderCtrl', function($scope) {
$scope.slides = [
'../images/sliderContent/1.jpg',
'../images/sliderContent/2.jpg',
'../images/sliderContent/3.jpg',
'../images/sliderContent/4.jpg'
];
});
// route for the home page
rustyApp.config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeController'
})
.when('/work', {
templateUrl: 'partials/work.html',
controller: 'WorkController'
})
.when('/contact', {
templateUrl: 'partials/contact.html',
controller: 'ContactController'
})
.otherwise({
redirectTo: '/home'
});
});
var viewController = angular.module('viewController', []);
var viewController = angular.module('viewController', []);
.directive('activeLink', ['$location', function(location) {
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
var clazz = attrs.activeLink;
var path = attrs.href;
path = path.substring(1); //hack because path does bot return including hashbang
scope.location = location;
scope.$watch('location.path()', function(newPath) {
if (path === newPath) {
element.addClass(clazz);
} else {
element.removeClass(clazz);
}
});
}
};
}]);
rustyApp.controller('HomeController', function($scope) {});
rustyApp.controller('WorkController', function($scope) {});
rustyApp.controller('ContactController', function($scope) {});
var OffCanvasDemoCtrl = function($scope) {};
I suspect I am not hooking the .directive correctly or not including a controller but if you look at the fiddle there isn't one!
UPDATE:
I wound with the following:
HTML
<section class="top-bar-section uk-navbar-flip">
<ul class="uk-navbar-nav ">
<li my-active-link="/"><i class="uk-icon-home uk-icon-medium "> </i>home</li>
<li my-active-link="/work"><i class="uk-icon-photo uk-icon-medium "></i> work</li>
<li my-active-link="/contact"><i class="uk-icon-envelope-o uk-icon-medium "></i> contact</li>
</ul>
</section>
JS
rustyApp.directive('myActiveLink', function($location) {
return {
restrict: 'A',
scope: {
path: "#myActiveLink"
},
link: function(scope, element, attributes) {
scope.$on('$locationChangeSuccess', function() {
if ($location.path() === scope.path) {
element.addClass('uk-active');
} else {
element.removeClass('uk-active');
}
});
}
};
});

You just need to change .directive(... to rustyApp.directive(... and take it outside of the config function.
This line causes the first JS error which causes rustyApp to fail to load as you have it inside the config for some reason.
I think you've misunderstood what's going on so I'll just write up this little example here:
```
rustyApp = angular.module(...).controller(...);
// Same result as below. IMO you should use the below generally as it is clearer.
rustyApp = angular.module(...);
rustyApp.controller(...);
```
Also directive, config, run, factory, service, controller (and any I've forgotten) are all functions that are available on a module 'object'. When you call one of them the result of the function is the module you called it on.

set directive element attributes through parent controller AngularJS

I want to configure my directive module through my app level controllers. Plunker
index.html
<div ng-controller="App">
<foodz index="index"></foodz>
</div>
app.js
angular.module('app', ['foodz']).
controller('App', ['$scope',function($scope){
$scope.index = 1;
}]);
foodz.js
angular.module('foodz', []).
controller('foodzController', ['$scope',function($scope){
//Data is coming in through external API
$scope.$on('foodzFetched', function(e,d) {
$scope.foodz = d;
});
//Lets say data to looks like:
//[{"name":"banana"},{"name":"smoothy"}]
}]).
directive('foodz', function() {
return {
restrict: 'E',
scope:{
index: '#'
},
replace: true,
controller: 'foodzController',
templateUrl: 'foodzTemplate.html',
link: function(scope, controller) {}
};
});
foodzTemplate.html
<div ng-controller="foodzController">
<span>
{{foodz[index].name}}
</span>
</div>
So in this example, I am trying to pass the index through my app level controller into an attribute of my directive element which also has its own controller.
What am I doing wrong here?

Try to make scope:{index:'='}
Look at Directive Definition Object
I think you are receiving index='index' (as string) in your controller. Using = it will get the value from parent controller.