I have a controller which has some custom UI router resolve params injected:
uxgroups.controller('UXGroupStepCtrl', ['$scope', '$rootScope', '$stateParams', 'stepData', function ($scope, $rootScope, $stateParams, stepData) {
But when using this controller in my directive I am getting errors that stepData is undefined:
angular.js:14682 Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=stepDataProvider%20%3C-%20stepData%20%3C-%20UXGroupStepCtrl%20%3C-%20UXGroupStepCtrl
which is :
Unknown provider: stepDataProvider <- stepData <- UXGroupStepCtrl <- UXGroupStepCtrl
Here is directive definition:
app.directive('passProcess', function (stepData) {
return {
restrict: 'E',
controller: 'UXGroupStepCtrl',
scope: { p: '=' },
templateUrl: '/App/Modules/UXGroup/Views/process.html'
};
});
Is there a way to dismiss or define the extra params in my directive controller?
You can't pass data to controller from a directive like that. But the controller has the same scope as the directive. So what you can do is set a $scope variable in the directive and reference it in the controller.
app.directive('passProcess', function (stepData) {
return {
restrict: 'E',
controller: 'UXGroupStepCtrl',
scope: { p: '=' },
templateUrl: '/App/Modules/UXGroup/Views/process.html'
};
});
uxgroups.controller('UXGroupStepCtrl', ['$scope', '$rootScope', '$stateParams',
function ($scope, $rootScope, $stateParams) {
$scope.variable = $scope.p
}
Just found this other question Injecting resolves into directive controllers
which suggests it cannot be done, and best way is to make a separate controller for the directive
Related
Here is my directive:
app.directive('gwQuestionSet', function (QuestionSetFactory, _) {
'use strict';
return {
restrict: 'A',
templateUrl: '/Classification/templates/question-set.html',
scope: {
'gwPlQuestionSet': '='
},
controller: ['$rootScope', '$scope', '$http', function ($rootScope, $scope, $http, _) {
var set = $rootScope.QuestionSets;
var getquestionSets = QuestionSetFactory.create();
var questionSets = getquestionSets.getQuestionSetViewModel(set);
$scope.questionSets = questionSets;
}]
};
});
My question is if I reset the data of $rootScope.QuestionSets from my main controller, can these code in directive controller be revoked and the template get refreshed?
I tried to use Angular boostrap-ui in a directive but it didn't work, so I decided to use a service which will use the Angular bootstarp-ui , and to inject it into directive.
I'm keep getting this error :
Unknown provider: ui.bootstrapProvider <- ui.bootstrap <- modal <- monitorCardDirective
The Angular app :
'use strict';
var app = angular.module('app', [ 'ui.bootstrap' ,'restangular']);
app.controller('nav', function($scope, $uibModal, $filter, Restangular) {
$scope.search = false;
});
app.directive('monitorCard',['modal',function(modal) {
return {
link: function(scope, element, attr) {
element.bind('click',function(){
modal.open({
templateUrl: 'monitoController.html',
controller: 'monitorController'
});
});
},
scope:{
monitorCard: '='
}
};
}]);
app.factory('modal',['ui.bootstrap',function($uibModal){
var modalInstance = $uibModal.open({
templateUrl: 'monitoController.html',
controller: 'monitorController'
});
return modalInstance;
}]);
In the definition of your modal factory, replace:
app.factory('modal', ['ui.bootstrap', function($uibModal)
with
app.factory('modal', ['$uibModal', function($uibModal)
As a side note, notice this factory returns a modal instance. A modal instance object is not a modal service and doesn't have an open method, so you will get another error. Judging at the directive you are defining, it seems you just need to inject uibModal service in the directive.
I would like to know if it is possible (if it is, so how? :)), to inject a dependency to a controller called by a directive.
I have a controller controller called MyCtrl. Here is his signature:
app.controller('MyCtrl', function ($scope, dataService, aDependency){...}
This Controller is usually defined in my route:
.segment('myPage', {
templateUrl: templatesUrl + 'mypage.html',
resolve: {
aDependency: ['$q', 'dataService', '$location', function ($q, dataService, $location) {
var defer = $q.defer();
dataService.retrieveCCData(defer, $location);
return defer.promise;
}],
},
controller: 'MyCtrl'
})
But now, I would also like to call this controller from a directive.
Problem is that I don't know How to inject the aDependency.
It said that the provider is unknown.
Here's my directive:
app.directive('gettingStarted1', ['dataService', function (dataService) {
return {
restrict: 'E',
templateUrl: templatesUrl + 'mypage.html',
controller: 'MyCtrl',
//resolve: {
//datasources: ['dataService', function (dataService) {
//return null;
//}]
//}
};
}]);
Resolve is impossible in directive.
Some help will be appreciate
Thank you
Make aDependency a separate service.
app.provider('aDependency', function () {
this.$get = ['$q', 'dataService', '$location', function ($q, dataService, $location) {
var defer = $q.defer();
dataService.retrieveCCData(defer, $location);
return defer.promise;
}];
});
You can resolve it with
resolve: {
'aDependency': 'aDependency',
}
or
resolve: ['aDependency'];
you could use the controller Function from the directive
.directive("sampledirective", function (dependancy1, dependancy2, ....) {
return {
scope: '=',
controller: function ($rootScope, $scope) {
//DO your controller magic here where you got your scope stuff
}
}
})
One thing i learned it seems the $scope values arent immediatly updated from directive to Controller. If you use objects like
$scope.smth.smth = 'test'
It gets updated immediatly else you would need to $apply
I'm trying to open a Bootstrap UI $modal inside a directive. It works, but when I want to add an 'inline' controller (see commented lines in the code below), I get a "[$injector:unpr] Unknown provider: nProvider <- n" error.
Can anyone tell me why?
angular.module('myApp.directives').directive('eModalForm', ['$modal', function ($modal) {
return {
restrict: 'A',
link: function ($scope, $element, $attrs) {
$scope.openModal = function () {
console.log('//==//');
var modalInstance = $modal.open({
templateUrl: '/App/Templates/modal.html',
// commented these lines to prevent error:
//controller: function ($scope, $modalInstance) {
// $scope.$modalInstance = $modalInstance;
//},
size: 'lg'
});
};
}
};
}]);
I am calling this function like this:
<div ng-repeat="item in list" ng-click="openModal(item)" e-modal-form>
The controller dependencies are lost during minification, just use the extended syntax:
controller: ['$scope', '$modalInstance', function ($scope, $modalInstance) {
...
}],
...
I am creating a navBar directive and I would like to use $routeParams to determine which link to set to active. I can access $routeParams in controllers with no problem:
app.controller('MovieDetailsController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
$scope.movie = {};
console.log($routeParams);
}]);
However, I am unable to get any data from $routeParams in my directive:
app.directive('navBar', ['$routeParams', function ($routeParams) {
console.log($routeParams);
}]);
What am I doing wrong?
Seems like when the directive is initialized $routeParams is not available. If you use the directive like below as in the plunk it should work.
app.directive('myDir', ['$routeParams', function ($routeParams) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
alert($routeParams.number);
});
}
}
}]);
http://plnkr.co/edit/joHLLqtsUK3xCAVemmeg?p=preview
try with ui router's $state.current.name , it will give you the current route in which you are in