help please.
I have simple project https://github.com/A1x1On/nodeJs-AngularJs
I don't understand why angularJs directive doesn't work while angularJs controller works.
These constructions include same and them paths are same, but .directive is broken
Help please.
it's just file with directive, but you better take look at project on git:
(function (angular) {
'use strict';
function contaction() {
var directive = {
restrict: 'E',
templateUrl: '/js/app/contact/templates/contact.template.html',
scope: true,
replace: true,
controller: [
'$scope',
function ($scope) {
$scope.eww = "ddsf";
}
]
};
return directive;
}
contaction.$inject = ['contact.factory'];
angular.module('contact').directive('contdirective', contaction);
})(angular);
Related
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;
...
I am trying to inject services to the below directive which is used link function instead of controller.
(function() {
angular
.module("myApp")
.directive('myDirective',['$scope','myService','myData',function($scope,myService,myData) {
return {
restrict'AE',
replace:'true',
templateUrl :'/myApp/directive/my-directive',
scope: {
userId: "#"
}
},
link:function(scope,elem,attr)
{
//Code for link function goes here ...
scope.myUsersArray [];
scope.getUserDetails = function()
{
//code for getUserdetails goes here...
}
}
}]);
})();
When i run this code, i am getting exception like [$injector:unpr] Unkown Provider <_ $scope error. If i remove the injected services, i am not getting any error. Error throws at angular.js file so i don't have any clue to fix it :(
You have several syntax issues. Your code should look like this:
.directive('myDirective', ['$scope', 'myService', 'myData', function($scope, myService, myData) {
return {
restrict: 'AE',
replace: 'true',
templateUrl: '/myApp/directive/my-directive',
scope: {
userId: "#"
},
link: function(scope, elem, attr) {
//Code for link function goes here ...
scope.myUsersArray = [];
scope.getUserDetails = function() {
//code for getUserdetails goes here...
};
}
};
}]);
You may have more problems as its not evident as to why you are injecting $scope, myService, and myData
I'm writing a directive in the following way:
Directive .html (the template)
DirectiveController .js (the controller)
Directive .js (the directive)
DirectiveController.js:
function DirectiveController($scope) {}
Directive.js:
someModule.directive('directive', function() {
return {
restrict: 'E',
templateUrl: 'Directive.html',
controller: DirectiveController,
scope: {
data: '='
}
}
});
The question is, how can I minify the DirectiveController?
I cant use the:
someModule.controller('someController',['$scope', function($scope) {} ]);
Thanks in advance
Use the $inject "annotation":
DirectiveController.$inject = ['$scope'];
function DirectiveController($scope) {
...
}
Yes, you can put the "annotation" before the function.
It's a well known issue in angular to need to use the special array syntax when bringing in dependencies into controllers to avoid minification problems, so I have been using that notation. But it seems that the injector is still having issues with this code that appear only after sending it through gulp-uglify.
Do other angular elements like directives also need to have this syntax be used? Also, I'm using object notation to define one of the controllers, so might that be the problem?
Some main config stuff.
var app = angular.module('musicApp', ['ngSanitize']);
//Whitelist Soundcloud
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://w.soundcloud.com/**'
]);
});
Directives, one with a controller in it.
app.directive('soundcloudHtml', ['$sce', function($sce){
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.musicPiece.soundcloud = $sce.trustAsHtml(scope.musicPiece.soundcloud);
}
}
}]);
app.directive('music', function(){
return {
restrict: 'E',
scope:{
type: '='
},
templateUrl: '/resources/data/music/music.html?po=343we',
link: function(scope, element, attrs) {
},
controller: ['$http', '$scope', function($http, $scope){
this.musicList = [];
$scope.Utils = Utils;
var ctrl = this;
$http.get('/resources/data/music/music.json').success(function(data){
ctrl.musicList = data;
Utils.updateTableOfContents();
});
}],
controllerAs: 'musicCtrl'
};
});
Looks like I missed that config also needs that pattern as well in order to be minified.
The config should be
//Whitelist Soundcloud
app.config(['$sceDelegateProvider', function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://w.soundcloud.com/**'
]);
}]);
And not
//Whitelist Soundcloud
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://w.soundcloud.com/**'
]);
});
I understand how Angular dependency injection works with directives but wanted clarification on something. I have a dummy test directive as follows:
app.directive("test", [
function() {
return {
restrict: "E",
scope: {},
controller: ["$scope", "$filter",
function($scope, $filter) {
var food = ["Apple pie", "Apple cobler", "Banana Split", "Cherry Pie", "Applesauce"];
$scope.favorites = $filter('filter')(food, "Apple");
}
],
template: "<div>{{favorites}}</div>"
}
}
]);
This works fine and will filter the food array as expected. However I noticed if I inject the $filter service in the directive as follows, it still works:
app.directive("test", ["$filter",
function($filter) {
return {
restrict: "E",
scope: {},
controller: ["$scope",function($scope) {...
My question: Is it better practice to inject services into a directive in the declaration line like so:
app.directive("test", ["$filter", function($filter) {
or in the controller line like this:
controller: ["$scope", "$filter", function($scope, $filter) {?
Is there no difference? Here is a Plunker of the directive code.
In this case, you're receiving the same service, so it likely doesn't matter too much. I personally prefer to keep them as localized as possible; if you don't need $filter in the link function or something like that, I'd just inject it into the controller.
In certain cases, this may also make it easier to mock dependencies during testing.
You can do this also. Much better way by splitting directive and its controller in a single file. Or you can write in separate files. But, better understand
app.directive('throbberDirective',
[
function(){
return {
restrict: "EA",
templateUrl: "common/utils/throbbers/throbber.html",
controller: throbberController
}
}
]);
app.controller('throbberController', throbberController);
throbberController.$inject = ['$scope', '_$ajax'];
function throbberController($scope){
$scope.throbber = _$ajax.getThrobberConfigs();
$scope.throbber.templateName = $scope.throbber.templateName;
}