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.
Related
I'm somehow newbie to $uibmodal and I want to show a form in popup style for each button that I have on my page, and I want to separate code of each popup form to their own js controller and template, not inside my main js controller and template.
here's my simpled code to show the form as a popup :
var modalInstance = $uibModal.open({
templateUrl: '/App/views/security/people/roleView.html',
controllerUrl: '/App/views/security/people/roleController.js',
controller: 'roleController',
size: 'lg',
resolve: {},
});
and here is my simpled code of my controller :
define(['app'], function (app) {
app.register.controller("roleController", ["$scope", "dataService", "$uibModal", "messageService",
function ($scope, dataService, $uibModal, messageService) {
debugger
}
]);
});
my problem is that whenever I click the button it give's me the error that my controller named as 'rolecontroller' is not registered.
The controller with the name 'roleController' is not registered.
thanks in advance.
You should add the controller in the initial bootstrap in your app.js like this
app.controller("roleController", ["$scope", "dataService", "$uibModal", "messageService",
function ($scope, dataService, $uibModal, messageService) {
debugger
}]);
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
I am using angular bootstrap ui modal which is working fine but when I try to close it using modalInstance it gives above error.Here is my code
var app = angular.module('LoginModule', ['ui.bootstrap']);
app.controller('LoginModal', ['$scope', '$modal', function ($scope, $modal) {
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: '/app/template/Login.html',
controller: 'LoginController',
size: size
});
}
}]);
app.controller('LoginController', ['$scope', '$modalInstance', '$http', function ($scope, $modalInstance, $http) {
$scope.model = {};
$scope.loading = {
state: false
}
$scope.errors = '';
$scope.email = "";
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
I have created the cancel function in the controller which I specify with the template still it gives error.I use ng-click="cancel()" in button inside LoginController .
Need help?
Looks like you are instantiating the controller with ng-controller directive in the modal view. Instead you only need to use controller option of the modal in order to get the special dependency $modalInstance injected. If you have instantiated controller using ng-controller="LoginController" you need to remove it and you would not need it as well as the controller would automatically be instantiated (by resolving special dependency $modalInstance) and attached to the template.
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
When I have a controller inside my html
<div ng-controller="myController" id="myCtrl">...</div>
I can access it via:
angular.element(myCtrl).controller()
But how can I access the controller from a directive?
directive('myDirective', function () {
return {
...
templateUrl: '/Views/myview.html',
controller: myController
}
})
This controller should be defined the same module module where your directive is defined:
E.g
angular.module('myModule', [])
.controller('myController',['$scope', function($scope){
$scope.myData = {'someData':1337};
}])
.directive('myDirective', [function(){
return {
...
templateUrl: '/Views/myview.html',
controller: 'myController'
}
}])
Here is a plunkr, demonstrating that way:
http://plnkr.co/edit/UDCWUI5EMlfoXb9u3GYh?p=preview
And here is a plunkr, demonstrating having a directive in a module using a controller that is defined in another module:
http://plnkr.co/edit/Gg0BzKPOqO2NnTgf3Hkr?p=preview
angular.module('myApp',[
])
.controller('MyController', ['$scope', function($scope){
$scope.someValue = 'someValueFromController';
}])
angular.module('otherModule', ['myApp'])
.directive('myDirective', [function(){
return {
restrict: 'E',
templateUrl: 'someTemplate.html',
controller: 'MyController'
}
}])
Alternatively, you can use the $controller service to instantiate your controller with the appropriate stuffs and use it everywhere (from every module that imports the module where your controller is defined).