Develop Reference

Error after Minification of angular js. Error: [$injector:unpr] Unknown provider: eProvider <- e <- makeErrorsDirective

I used Gulp to minify my entire js files. Once minified I got an error like the following:
[$injector:unpr] Unknown provider: eProvider <- e <- makeErrorsDirective.
I had a Custom directive in my controller file.
var myhubdashboardControllers = angular.module('vpdashboardmodule', []);
.directive('mhDashboard', function ($http, authService, apiService) {
return {
restrict: 'EA',
scope: {
name: '#',
dash: '#',
report: '#',
disname: '#',
disdesc: '#',
distot: '#'
},
templateUrl: 'views/dashboard/dashboard-direc.html',
link: function (scope, element, attr) {
scope.linkChk = scope.name;
switch (scope.linkChk) {
case 'Shipped This Week':
scope.url = 'erp/JobShipmentList/PostCpsVwShipmentCount';
scope.shipstatus = "Departure";
scope.period = "ThisWeek";
scope.basicfilter = "Open";
scope.linkName = "Shipments";
scope.linkDesc = "Shipped This Week";
break;
})
};
This is the code used in my application.

There is a reason why you have to inject services and controller in string array.
if you want to inject scope to controller, you have to use
angular.module('yourApp')
.controller('yourController',['$scope',function($scope){
}]);
Minification will change the variable names and if you don't use that array of strings while injecting services or controllers, it will be like
angular.module('yourApp')
.controller('yourController',function(e){
});
So, angular will not be able to understand what 'e' stands for, hence the error.
Always remember that the order is also important.
.directive('mhDashboard', ['$http','authService','apiService', function ($http, authService, apiService) {
return {
restrict: 'EA',
scope: {
name: '#',
dash: '#',
report: '#',
disname: '#',
disdesc: '#',
distot: '#'
},
templateUrl: 'views/dashboard/dashboard-direc.html',
link: function (scope, element, attr) {
scope.linkChk = scope.name;
switch (scope.linkChk) {
case 'Shipped This Week':
scope.url = 'erp/JobShipmentList/PostCpsVwShipmentCount';
scope.shipstatus = "Departure";
scope.period = "ThisWeek";
scope.basicfilter = "Open";
scope.linkName = "Shipments";
scope.linkDesc = "Shipped This Week";
break;
}
}])

Angular doesn't always work well with minification.
If you as an example write this:
angular.controller("MyCtrl", function ($scope) {...});
Then the $scope would be changed to something meaningless during minification.
If one instead changes that to:
angular.controller("MyCtrl", ["$scope", function (s) {...}]);
Then it doesn't matter what the first argument in the function is called (here s), as long as the string is "$scope".
See this: https://docs.angularjs.org/tutorial/step_05#a-note-on-minification in the documentation for more details.
If you want more help, you have to post the code in question, not just the error.

I had this same issue, even when I use gulp-ng-annotate, but it only happens occurs for $stateProvider and ngDialog resolves:
$stateProvider
.state('orders', {
url: '/orders',
templateUrl: 'templates/orders.html',
controller: 'OrdersController as vm',
resolve: {
authenticate: function (Auth) {
return Auth.getAuthResolve();
}
}
});
Resolve needs to be written like this:
resolve: {
authenticate: ['Auth', function (Auth) {
return Auth.getAuthResolve();
}]
}
So it feels that ng-annotate does not inject the array into resolves, but only to controller/service/factory constructors.

I had an issue using angular-ui-router-title. After changing
$titleProvider.documentTitle(function($rootScope) {
return $rootScope.$title + ' my title';
});
to
$titleProvider.documentTitle(['$rootScope', function($rootScope) {
return $rootScope.$title + ' my title';
}]);
the error doesn't appear anymore.

Defining my own 'require' on a directive, but throw error - AngularJs

Let us say I have this html:
<div ng-controller="MyCtrl">
<br>
<my-directive my-name="name">Hello, {{name}}!</my-directive>
</div>
with this simple controller:
myApp.controller('MyCtrl', function ($scope) {
$scope.name = 'Superhero';
});
And I have a directive in which I want to change the 'name' using require like this:
myApp.directive('myDirective', function($timeout) {
var controller = ['$scope', function ($scope) {
$scope.name = "Steve";
}];
return {
restrict: 'EA',
require: 'myName',
controller: controller,
link: function(scope, element, attrs, TheCtrl) {
TheCtrl.$render = function() {
$timeout(function() {
TheCtrl.$setViewValue('StackOverflow');
}, 2000);
};
}
};
});
But throws:
Error: No controller: myName
Here is the fiddle
But if I implement it using ng-model, works. Look here in this other fiddle
I have read that if you use 'require' in a directive, you need to have a controller for it.
So:
What I'm doing is wrong? It is not in this way? I need to do any other thing?

Well finally I got it.
Essencially what I'm trying to do is something called: 'Communication between directives using controllers'. I have found an article explaining this, and helped me a lot:
The view:
<div ng-controller="MyCtrl">
<br>
<my-directive my-name>Hello, {{name}}!</my-directive>
</div>
As you see above, there are two directives: my-directive and my-name. I will call inside my-directive a function from the controller of my-name directive using require.
myDirective:
myApp.directive('myDirective', function($timeout) {
return {
require: 'myName',
link: function(scope, element, attrs, myNameCtrl) {
$timeout(function() {
myNameCtrl.setName("Steve");
}, 9000);
} // End of link
}; // return
});
myName:
myApp.directive('myName', function($timeout) {
var controller = ['$scope', function ($scope) {
// As I tried, this function can be only accessed from 'link' inside this directive
$scope.setName = function(name) {
$scope.name = name;
console.log("Inside $scope.setName defined in the directive myName");
};
// As I tried, this function can accessed from inside/outside of this directive
this.setName = function(name) {
$scope.name = name;
console.log("Inside this.setName defined in the directive myName");
};
}];
return {
controller: controller,
link: function(scope, element, attrs, localCtrl) {
$timeout(function() {
localCtrl.setName("Charles");
}, 3000);
$timeout(function() {
scope.setName("David");
}, 6000);
} // End of link function
};
});
Interesting and works like a charm. Here is the fiddle if you want to try it out.
Also, you can get communication between directives using events. Read this answer here on SO.

How to access a require'd controller from another controller?

I have an Angular 1.3 module that looks something like this (directive that requires the presence of a parent directive, using controllerAs):
angular.module('fooModule', [])
.controller('FooController', function ($scope) {
this.doSomething = function () {
// Accessing parentDirectiveCtrl via $scope
$scope.parentDirectiveCtrl();
};
})
.directive('fooDirective', function () {
return {
// Passing in parentDirectiveCtrl into $scope here
link: function link(scope, element, attrs, parentDirectiveCtrl) {
scope.parentDirectiveCtrl = parentDirectiveCtrl;
},
controller: 'FooController',
controllerAs: 'controller',
bindToController: true,
require: '^parentDirective'
};
});
Here I'm just using $scope to pass through parentDirectiveCtrl, which seems a little clunky.
Is there another way to access the require-ed controller from the directive's controller without the linking function?

You must use the link function to acquire the require-ed controllers, but you don't need to use the scope to pass the reference of the controller to your own. Instead, pass it directly to your own controller:
.directive('fooDirective', function () {
return {
require: ["fooDirective", "^parentDirective"],
link: function link(scope, element, attrs, ctrls) {
var me = ctrls[0],
parent = ctrls[1];
me.parent = parent;
},
controller: function(){...},
};
});
Be careful, though, since the controller runs prior to link, so within the controller this.parent is undefined, until after the link function runs. If you need to know exactly when that happens, you can always use a controller function to pass the parentDirective controller to:
link: function link(scope, element, attrs, ctrls) {
//...
me.registerParent(parent);
},
controller: function(){
this.registerParent = function(parent){
//...
}
}

There is a way to avoid using $scope to access parent controller, but you have to use link function.
Angular's documentation says:
Require
Require another directive and inject its controller as the fourth
argument to the linking function...
Option 1
Since controllerAs creates namespace in scope of your controller, you can access this namespace inside your link function and put required controller directly on controller of childDirective instead of using $scope. Then the code will look like this.
angular.module('app', []).
controller('parentController', function() {
this.doSomething = function() {
alert('parent');
};
}).
controller('childController', function() {
this.click = function() {
this.parentDirectiveCtrl.doSomething();
}
}).
directive('parentDirective', function() {
return {
controller: 'parentController'
}
}).
directive('childDirective', function() {
return {
template: '<button ng-click="controller.click()">Click me</button>',
link: function link(scope, element, attrs, parentDirectiveCtrl) {
scope.controller.parentDirectiveCtrl = parentDirectiveCtrl;
},
controller: 'childController',
controllerAs: 'controller',
bindToController: true,
require: '^parentDirective'
}
});
Plunker:
http://plnkr.co/edit/YwakJATaeuvUV2RBDTGr?p=preview
Option 2
I usually don't use controllers in my directives at all and share functionality via services. If you don't need to mess with isolated scopes of parent and child directives, simply inject the same service to both of them and put all functionality to service.
angular.module('app', []).
service('srv', function() {
this.value = '';
this.doSomething = function(source) {
this.value = source;
}
}).
directive('parentDirective', ['srv', function(srv) {
return {
template: '<div>' +
'<span ng-click="srv.doSomething(\'parent\')">Parent {{srv.value}}</span>' +
'<span ng-transclude></span>' +
'</div>',
transclude: true,
link: function(scope) { scope.srv = srv; }
};
}]).
directive('childDirective', ['srv', function(srv) {
return {
template: '<button ng-click="srv.doSomething(\'child\')">Click me</button>',
link: function link(scope) { scope.srv = srv; }
}
}]);
Plunker
http://plnkr.co/edit/R4zrXz2DBzyOuhugRU5U?p=preview

Good question! Angular lets you pass "parent" controller. You already have it as a parameter on your link function. It is the fourth parameter. I named it ctrl for simplicity. You do not need the scope.parentDirectiveCtrl=parentDirectiveCtrl line that you have.
.directive('fooDirective', function () {
return {
// Passing in parentDirectiveCtrl into $scope here
link: function link(scope, element, attrs, ctrl) {
// What you had here is not required.
},
controller: 'FooController',
controllerAs: 'controller',
bindToController: true,
require: '^parentDirective'};});
Now on your parent controller you have
this.doSomething=function().
You can access this doSomething as
ctrl.doSomething().

Issues accessing linking/scope inside of a directive

Could use some help understanding whats happening here... I need to create a directive from within a service and add it to the DOM... check! But now when I try to access properties on the scope, inside of the directive/template I get nothing. Correction, {{property}} inside of the template by itself will work, but not <h1>{{property}}</h1>.. so in other words, it stops working when I add HTML to the template. Anyways I created this plunkr to try to understand.
app:
angular.module('app', [])
.run(['fooService', function(fooService) {
fooService.foo('Hello World!');
}]);
service:
function fooService($rootScope, $compile, $animate) {
function createDirective(message) {
var newFoo = {
scope: $rootScope.$new()
};
var target = angular.element(document.querySelector('#bar'));
var elem = angular.element(document.createElement('foo'));
newFoo.scope.message = message;
newFoo.elem = $compile(elem)(newFoo.scope);
$animate.enter(newFoo.elem, target).then(function() {});
}
function foo(message, overrides) {
return createDirective(message);
}
return {
foo: foo
};
}
fooService.$inject = ['$rootScope', '$compile', '$animate'];
angular.module('app')
.factory('fooService', fooService);
directive:
function fooDirective() {
return {
restrict: 'AE',
templateUrl: 'foo.html',
link: function(scope) {
console.log(scope.message);
}
}
}
angular.module('app')
.directive('foo', fooDirective);
template - displays: "Directive message:"
<h1>
Directive message: {{message}}
</h1>
working template -displays: "Directive message: Hello World!"
Directive message: {{message}}
New to Angular still so please forgive me if this is not how it should be done but can someone please explain whats happening? Thanks in advanced!

Your template needs to be compiled with with the scope as the context. Replace your directive with:
function fooDirective($compile, $templateRequest) {
return {
restrict: 'AE',
link: function(scope, el) {
console.log(scope.message);
$templateRequest("foo.html").then(function(html){
var template = angular.element(html);
el.append(template);
$compile(template)(scope);
});
}
}
}

AngularJS: How do I call a function defined in a directive's scope from a controller?

I need to call a function which belongs to the $scope of a ng-directive used in my Angular application.
Let's say the directive is defined like this:
.directive('my-directive', ['$document', '$timeout', function ($document, $timeout) {
return {
restrict: 'E',
replace: true,
scope: {
// ....
},
controller: ['$scope', function ($scope) {
$scope.myFunction= function (mouseEnter) {
// ...
};
}
};
}]);
I need to call myFunction from my controller (let's call it my-controller) which is the controller of the view where my directive is placed.
Is it possible to do it? (eventually modifying the directive)
EDIT : The already answered question provided (proposed for edit) is similar to mine by it's not clear to me or it doesn't apparently solve the specific problem I proposed.
EDIT 2: starting from Dan M. answer (without taking mouseenter/mouseleave in consideration. just trying to make the two controllers communicate with each other), I broadcasted my event to my directive's controller through $rootScope (as there is there is no parent-child relation between the two controllers) by:
console.log("let's broadcast the event.."); // this is printed
$rootScope.$broadcast('callDirectiveControllersFunction'); // I even tried with $scope in place of $rootScope and $emit in place of $broadcast
and by receving it (within the directive's controller) by:
var myFunction = function(){
// ...
}
$scope.$on('callDirectiveControllersFunction', function (){
console.log("event received"); // this is not printed
callMyFunction();
});
// I even tried using $rootScope in place of $scope
However in no case (see comments in code) the event is received

You can call a controller function inside the link block. You can also $emit an event in the directive and listen to the it in the controller (maybe there is a use case for that).
It seems that you want to call it on mouseenter. You can do that by binding to the mouseenter event in the directive link. The catch is you need to $apply the changes.
Take a look at the following piece of code, which contains all 3 examples: http://jsbin.com/cuvugu/8/. (also pasted below)
Tip: You might want to pay attention to how you name your directives. To use a directive as my-directive you need to name it as myDirective.
var app = angular.module('App', []);
app.directive('myDirective', function () {
function directiveLink(scope){
scope.$emit('customEvent');
}
return {
restrict: 'EA',
scope: {},
link: directiveLink,
controller: function ($scope) {
$scope.bar = 'bar';
$scope.myFunction = function () {
$scope.bar = 'foobar1';
};
$scope.$on('customEvent', function (){
$scope.myFunction();
});
},
template: "Foo {{bar}}"
};
});
app.directive('anotherDirective', function () {
function directiveLink(scope){
scope.myFunction();
}
return {
restrict: 'EA',
scope: {},
link: directiveLink,
controller: function ($scope) {
$scope.bar = 'bar';
$scope.myFunction = function () {
$scope.bar = 'foobar2';
};
},
template: "Foo {{bar}}"
};
});
app.directive('mouseDirective', function () {
function directiveLink(scope, element){
element.bind('mouseenter', function(){
scope.$apply(function(){
scope.myFunction();
});
});
element.bind('mouseleave', function(){
scope.$apply(function(){
scope.myOtherFunction();
});
});
}
return {
restrict: 'EA',
link: directiveLink,
controller: function ($scope) {
$scope.bar = 'no';
$scope.myFunction = function () {
$scope.bar = 'yes';
};
$scope.myOtherFunction = function () {
$scope.bar = 'no';
};
},
template: "Mouse Enter: {{bar}}"
};
});
I also included an example with a distinct controller in the JS Bin link. That doesn't really change anything, but it seems to be an important part of your question. Here's the code block:
var app = angular.module('App', []);
app.controller('myController', function($scope){
$scope.bar = 'foo';
$scope.myFunction = function(){
$scope.bar = 'foobar3';
};
});
app.directive('lastDirective', function () {
function directiveLink(scope){
scope.myFunction();
}
return {
restrict: 'EA',
scope: {},
link: directiveLink,
controller: 'myController',
template: "Foo {{bar}}"
};
});