i am using ui-router and there i am resolving some data i want to inject the resolve to my custom directive ,below is code how i am doing
module portal {
$stateProvider.state('portal', {
url: '/demo',
template: tpl.html,
abstract: true,
resolve: {
demoResolve:function(){
return 'foo';//here i am returing a promise
}
});
}
module portal.directives{
export class demoDirevtive{
static $inject =['demoResolve'];
constructor(demoResolve){
console.log(demoResolve)
var directive: ng.IDirective = {};
directive.link = (scope, element, attrs, ctrl) => {
};
directive.restrict = "EAC";
return directive;
}
}
}
but i am getting error of unknown provider
From reading their code it doesn't seem like it's possible, they have a local variable that they inject into the controller you define on the view, it's not accessible via $inject service as well.
Easiest solution would be to put it on the controller's scope, and then use it in the directive.
You can also create a real service, that will hold all the resolved objects in your application, i.e.:
resolve: {
demoResolve: ['myResolvingService', function(resolver) {
resolver.myValue = 'Foo';
return 'Foo';
}]
I know it's not what you were looking for, but it just doesn't look like it's supported.
Here is example how to pass resolve value to directive via controller:
.state('something.edit', {
url: '/:id',
template: '<something-edit title="title"></something-edit>',
controller: function($scope, $title){
$scope.title = $title;
},
resolve: {
$title: ()=>{
return 'Something Edit';
}
}
});
They added support for this in 2016.
This is the github thread:
https://github.com/angular-ui/ui-router/issues/2664#issuecomment-204593098
The important part is:
in 0.2.19 we are adding $resolve to the $scope, allowing you to do "route to component template" style
template: <my-directive input="$resolve.simpleObj"></my-directive>,
Related
I am using Angular 1.5.7 version.
I have a directive that takes in the controller name and view name as strings to then invoke the controller respectively.
I am not able to bind username to the invoking controller from the previous controller, I see the value available in my previous controller.
Please can you advise what could be the issue?
myApp.directive("pendingRequests", function() {
return {
restrict: 'E',
controller: "#",
name: "controllerName",
controllerAs: 'pendingReqCtrl',
scope: {},
bindToController: {
username: '=username'
},
templateUrl: function(tElement, tAttrs) {
return tAttrs.templateUrl;
}
};
});
Thank you #westor you saved my day. I just updated my angular and started getting this issue, spent a lot of time fixing it, then I found this. So thought of giving some examples.
Using $onInit in your controller function for binding scope
controller: function () {
this.$onInit = function () {
// your business logic
};
};
In my app, I was binding through scope
myApp.directive('pendingRequests', function () {
return {
scope: {
item:'='
},
bindToController: true,
controller: controller,
controllerAs: 'vm',
controller: function ($scope) {
console.log(this.item); // doesn't logs
this.$onInit = function () {
console.log(this.item); // logs your other directives object
};
}
}
});
using require
myApp.directive('pendingRequests', function () {
return {
scope: {},
bindToController: {},
controller: controller,
controllerAs: 'pendingReqCtrl',
require: {
parent: '^otherDirective'
},
controller: function ($scope) {
console.log(this.parent); // doesn't logs
this.$onInit = function () {
console.log(this.parent); // logs your item object
};
}
}
});
Did you try $onInit to initialize your code?
angularjs doc says this:
Deprecation warning: although bindings for non-ES6 class controllers
are currently bound to this before the controller constructor is
called, this use is now deprecated. Please place initialization code
that relies upon bindings inside a $onInit method on the controller,
instead.
I updated to 1.6.2 and I had to put my code into $onInit method to access the bindings.
In my angularJS app, I'm trying to pass a parameter to a modal popup so that when the Modal link is click, a name is displayed in the popup. The modal link is coming from a custom directive which is getting the list on names from an external service.
I've tried following this tutorial to Create an Angularjs Popup Using Bootstrap UI along with the documentation for $uibModal as that tutorial is a bit outdated.
I can get the modal PopUp and controller working but I can't pass a parameter to it.
I replicated the issue on Plunker.
This problem is I can't get the titlename param passed to the popupController from the listings directive (see script.js in Plunker). I don't think I have the resolve set up correctly. With the debugger set in Chrome I can see the titlename value up to this point.
app.directive('listings', [function(){
return {
restrict: 'E',
...
controller: ['$scope','$uibModal', function listingsDirectiveController($scope,$uibModal) {
$scope.open = function (titlename) {
var uibModalInstance = $uibModal.open({
templateUrl: 'popup.html',
controller: 'popupController',
titlename: titlename,
resolve: {
item: function(){
return titlename;
}
}
});
}
}]
};
}]);
But it doesn't get passed to the popupController. In the below code the titlename has value undefined
app.controller('popupController', ['$scope','$uibModalInstance', function ($scope,$uibModalInstance, titlename) {
$scope.title1 = titlename;
$scope.close = function () {
$uibModalInstance.dismiss('cancel');
};
}]);
Any idea why this is happening and how I can fix it? Is this the correct way to use resolve in AngularJS?
You don't need a double brace when using ng-click. See this post for more information on using the double curly braces. So your listings directive should be something like this. You were passing the actual string '{{item.name}}'
{{item.name}} -Popup
Then in your popupController, you were not passing the resolved item value. The controller should read:
app.controller('popupController', ['$scope','$uibModalInstance', 'item', function ($scope,$uibModalInstance, titlename) {
See plunker
First, you want to pass item.name, not the literal string '{{item.name}}' to your open method so change your template to
ng-click="open(item.name)"
Second, your resolved property is named item but you seem to be expecting titlename so change it to
resolve: {
titlename: function() {
return titlename;
}
}
And finally, you don't have an injection annotation for titlename in your controller so you need to add it
app.controller('popupController', ['$scope','$uibModalInstance', 'titlename',
function ($scope,$uibModalInstance, titlename) {
// ...
}])
Fixed Plunker ~ http://plnkr.co/edit/ee7Psz2jXbVSkD0mfhS9?p=preview
First, in your listingsDirective.html, don't use curly brackets to pass in variables. Also, by adding titlename1 to the directive $scope and sharing that parent scope with the child modal, you can access the variables in your modal.
app.directive('listings', [function(){
return {
restrict: 'E',
scope: {
data:'=',
},
templateUrl: 'listingsDirective.html',
replace: true,
controller: ['$scope','$uibModal', function listingsDirectiveController($scope,$uibModal) {
$scope.open = function (titlename) {
$scope.titlename = titlename;
var uibModalInstance = $uibModal.open({
templateUrl: 'popup.html',
controller: 'popupController',
scope: $scope,
resolve: {
item: function(){
return $scope.titlename;
}
}
});
}
}]
};
}]);
app.controller('popupController', ['$scope','$uibModalInstance', function ($scope,$uibModalInstance) {
$scope.title1 = $scope.titlename;
$scope.close = function () {
$uibModalInstance.dismiss('cancel');
};
}]);
New Plunkr: http://plnkr.co/edit/RrzhGCLuBYniGGWvRYI9?p=preview
In my Angular v1.4.8 app using ngRoute, I have a route with a resolve that I want to access in the link function of a custom directive.
According to the docs:
For easier access to the resolved dependencies from the template, the
resolve map will be available on the scope of the route, under
$resolve (by default) or a custom name specified by the resolveAs
property.
...yet $resolve is undefined on the scope property in my custom directive's link function -- even when I watch it for changes.
Why is $resolve not available on scope?
Code: (JSFiddle)
angular.module('myApp', ['ngRoute'])
.config(routeConfig)
.directive('myDirective', myDirective)
;
function routeConfig($routeProvider) {
$routeProvider
.when('/', {
resolve: {
data: function($q) {
var deferred = $q.defer();
deferred.resolve('foo');
return deferred.promise;
}
},
template: '<my-directive></my-directive>'
})
.otherwise('/')
;
}
function myDirective($route) {
return {
link: function(scope, iElement, iAttrs) {
console.log($route.current.locals); // contains data
console.log(scope.$resolve); // undefined
scope.$watch(function() {
return scope.$resolve;
}, function(newValue) {
console.log(newValue); // undefined, never changes
});
}
};
}
This paragraph is in the documentation for the 1.5 version, but not in the documentation of the 1.4.x version, that you're using. So it's something new in 1.5.
I'm aware how I can get parent's directive controller in the child directive's link function.
However, I'd prefer to avoid using link function (and $scope all-together) and have all my code under the controller function of the directive.
angular.directive('parent', function(){
return {
templateUrl: '/parent.html',
scope: true,
bindToController: true,
controllerAs: 'parentCtrl',
controller: function(){
this.coolFunction = function(){
console.log('cool');
}
}
}
});
angular.directive('child', function(){
return {
templateUrl: '/child.html',
require: '^parent',
scope: true,
bindToController: true,
controllerAs: 'childCtrl',
controller: function() {
// I want to run coolFunction here.
// How do I do it?
}
}
});
Any help is appreciated!
The proper pattern for that would be
app.directive('child', function(){
return {
templateUrl: '/child.html',
require: ['child', '^parent'],
scope: true,
bindToController: true,
controllerAs: 'childCtrl',
controller: function() {
this.coolFunction = function () {
this._parent.coolFunction();
}
},
link: function (scope, element, attrs, ctrls) {
var childCtrl = ctrls[0];
var parentCtrl = ctrls[1];
childCtrl._parent = parentCtrl;
}
}
});
The bad thing is that _parent is being exposed to scope with controllerAs, but it will rarely be a problem.
Notice that you won't have access to parent controller from child until link glues them together. Which is fine as long as you use parent controller in child methods.
Controller provides methods and initial properties to view model (and it does it cleaner with controllerAs), link glues the stuff, that's how directives work.
Both $scope and link have their purposes in Angular 1.x and are indispensable even with latest community developments. Banishing them for no valid reason is overzealous and may lead to bad design solutions. The absence of 'link' and 'scope' words in code won't help to make the app easier to port to 2.x. Though learning Angular 2 now and developing proper habits for 1.x will.
You could inject '$element' into the controller and access the parent controller like -
controller: ($element) ->
var parentCtrl = $element.parent().controller('parent');
parentCtrl.coolFunction();
//..........
//..........
This may not be the most transparent way of accessing 'any' parent controller because it requires the specific name of the directive and it is jqlite and not pure Angular.
Found this thread useful - How to access parent directive's controller by requiring it recursively?
EDIT: Thanks to #Dmitry for figuring out that angular doesn't need '.parent' to get the controller. Updated code -
controller: ($element) ->
var parentCtrl = $element.controller('parent');
parentCtrl.coolFunction();
//..........
See here or here
var parentForm = $element.inheritedData('$formController') || ....
var parentForm = $element.controller('form')
I'm using AngularUI router (0.2.13) and have a state defined as such
.state('foo', {
template:'<div some-directive></div>',
resolve: {
foo: function(SomeService) {
return SomeService.something().promise;
}
}
})
and a directive like this:
app.directive('someDirective', function(){
return {
controller: function(data) {
// I want `data` to be injected from the resolve...
// as it would if this was a "standalone" controller
}
}
})
but this doesn't work - the data parameter causes an UnknownProvider error. Defining the directive controller independently and setting it by name in the directive has the same result.
I more or less get why this is happening, but have two questions:
is there a way to do what I'm trying to do?
should I be trying to do it, or have I slipped into an antipattern here?
You can't use resolves in directives, but you can pass the result resolved in the state down to the directive which I think accomplishes what you're looking for.
You'd want to update your state definition to include a controller and set a parameter on the directive:
.state('foo', {
template:'Test<div some-directive something="foo"></div>',
url: 'foo',
resolve:{
foo:function(SomeService){
return SomeService.something();
}
},
controller: function($scope, foo){
$scope.foo = foo;
}
})
Then update the directive to use this parameter:
.directive('someDirective', function(){
return {
controller: function($scope) {
// I want `data` to be injected from the resolve...
// as it would if this was a "standalone" controller
console.log('$scope.something: '+ $scope.something);
},
scope: {
something: '='
}
};
})
Here's a sample plunker: http://plnkr.co/edit/TOPMLUXc7GhXTeYL0IFj?p=preview
They simplified the api. See this thread:
https://github.com/angular-ui/ui-router/issues/2664#issuecomment-204593098
in 0.2.19 we are adding $resolve to the $scope, allowing you to do "route to component template" style
template: <my-directive input="$resolve.simpleObj"></my-directive>,