I have a directive <my-directive> that is an element. I do not use link or compile, just:
export default function myDirective() {
return {
restrict: 'E',
scope: true,
templateUrl: 'my-directive.html',
controller: mydirective,
controllerAs: 'mine',
bindToController: {}
}
}
This of course is a fake directive, but the issue I have is being able to add a css class on this directive when it is in the DOM.
if there is anymore information I need to add, please let me know.
You could target the directive's tag from your CSS/scss stylesheet, this way:
Say you have:
<mydirect></mydirect>
So in styles.css:
mydirect {
background-color: red;
}
Related
I created a directive to add a hint-icon with a description for label, as the following:
propertyWindowModule.directive('hintIcon', {
restrict: 'A',
controller: HintIconController,
controllerAs: 'vm'
});
class HintIconController {
static $inject = ['$element', '$timeout'];
constructor(private $element:ng.IRootElementService,
private $timeout: ng.ITimeoutService) {
if(!_.isEmpty(this.$element.attr('hint-icon'))) {
this.$element.attr('title', this.$element.attr('hint-icon'));
this.$element.append($('<i class="tooltip-icon glyphicon glyphicon-question-sign">').attr('title', this.$element.attr('hint-icon')));
}
}
}
And in some views I used it in the label:
<label ng-bind="vm.label" hint-icon="test icon"></label>
The the ng-bind isn't working, but the hint-icon working well - I see the icon of the description with the tooltip, but with no label.
Actually when you define two directive in an element it will throw an exception : "Multiple directives for one scopes!". So you need to define your own ng-bind in hint-icon directive.
<label hint-icon="test icon" hint-icon-bind="vm.label"></label>
propertyWindowModule.directive('hintIcon', {
restrict: 'A',
scope: {
hintIconBind: '='
},
controller: HintIconController,
controllerAs: 'vm'
})
And you use it in your controller like:
scope.vm.hintIconBind
I have a parent component that is using transclude functionality. In its transcluded part as a default there is the child component:
export class ParentController {
// some logic here
}
angular.module('dmp').component('parentObject', {
bindings: {
},
controller: ParentController,
transclude: true,
templateUrl: 'test/parent.html'
});
}
export class ChildController {
}
angular.module('dmp').component('childObject', {
bindings: {
},
require: {
parentCtrl: '^parentObject'
},
controller: ChildController,
templateUrl: 'test/child.html'
});
}
index.html:
<parent-object>
</parent-object>
parent.html
<div ng-transclude>
<child-object></child-object>
</div>
Note that <child-object> is in the transclude part of parent object
I get the following error:
Controller 'parentObject', required by directive 'childObject', can't be found!
if I make it like this it works as expected but this is not my case.
<parent-object>
<child-object></child-object>
</parent-object>
Thanks
EDIT related to gyc comment.
If I understood correctly I can remove the <div ng-transclude> part and just use the child object without transclusion. This is ok but I want later on to say:
<parent-object>
<some-other-object></some-other-object>
</parent-Object>
And then the <child-object> will be replaced by the <some-other-object>. If I do not use transclusion this will not happen and the <child-object> will remain.
try change this in the childObject definition
require: {
parentController: '^parentObject'
}
maybe parentCtrl is not a defined alias for parentController
camelcased components are dash delimited as dom-elements, so it shoud look like this:
angular.module('dmp').component('childObject', {
bindings: {
},
require: {
parentCtrl: '^parent-object'
},
controller: ChildController,
templateUrl: 'test/child.html'
});
New to angular2, so sorry if this is a stupid, easy question.
In angular1, i could create a simple directive like this, which will add a css class to the element, if a property of the model is true.
angular.module('app').directive('myDirective', function () {
'use strict';
return {
restrict: 'E',
templateUrl: '<div>Hello</div>',
scope: {},
bindToController: {
myModel: '='
},
controller: function() {
},
controllerAs: 'ctrl',
link: function(scope, element, attrs, ctrl) {
if (myModel.addClass)
element.addClass('col-xs-2');
}
};
});
How can i do this in angular2? Here is the component code for angular2, but i cannot find out how to add the class to the root element tag.
imports { Input } from '#angular/core';
#Component({
selector: 'my-directive',
template: `
<div>Hello</div>
`,
})
export class MyDirectiveComponent {
#Input()
myModel: Object;
}
I think you are looking for ngClass binding...
<div [ngClass]="{'col-xs-2': myModel.addClass}">
Easy way (but not recommended ) would be
<div [style]="myStyle"></div>
and in your component
export class MyDirectiveComponent {
#Input()
myModel: Object;
changeModel(col : number){
this.myModel = 'col-xs-'+col; // Gives you col-xs-1 or 2 ....based on input
}
}
I have 2 directives created:
module WU_Tombstones.core.directives {
export function publicOffersList(): ng.IDirective {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: WU_Tombstones.controllers.publicOffersController,
controllerAs: 'offersCtl',
templateUrl: '/desktopmodules/lrsweb/wu_tombstones/app/publicOffers/publicOffers.html',
replace: false
}
}
export function advisoryTransactionsList(): ng.IDirective {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: WU_Tombstones.controllers.advisoryTransactionsController,
controllerAs: 'transCtl',
templateUrl: '/desktopmodules/lrsweb/wu_tombstones/app/advisoryTransactions/advisoryTransactions.html',
replace: false
}
}
}
in my html I simply have these 2 elements:
<div ng-app="WU_Tombstones">
<public-offers-list id="offersList"></public-offers-list>
<advisory-transactions-list id="advTransList"></advisory-transactions-list>
</div>
the 2nd directive never loads ... it's just blank. If I remove the first one the 2nd one works.
Any ideas?
I'm not familiar with Angular 2 syntax but I would check for errors in console and maybe a missing ; between directive declarations.
This was dumb. These directives are inside a DNN module and what I was trying to do was add these directives as 2 different modules, so the problem was the JS was being registered before the 2nd module was on the page so it wasn't firing.
Here is a directive that is loading new Template from file:
.directive('candidatesFilter', function(){
return {
resctict: 'E',
replace: true,
templateUrl: 'views/directives/filters/AAAA.html'
}
})
Next HTML-element calls this directive from the other HTML-Template (e.g. xxx.html):
<candidates-filter></candidates-filter>
There is next controller for this parent Template (xxx.html):
app.controller('candidatesController', function($scope, $location ){
$scope.addPeson = function() {
$location.url('/candidate/0');
};
});
Method addPerson() is not accessible inside the Directive's template AAAA.html, because
data-ng-click="addPerson()"
is not working there. How to change the Directive to make addPerson() method available inside the directive's template?
TEMPORARY Solution
I fixed this issue by next solution
.directive('candidatesFilter', function(){
return {
resctict: 'E',
replace: true,
templateUrl: 'views/directives/filters/AAAA.html',
controller: function(){
$('button.add').on('click',function(){
location.hash = '#/candidate/0';
});
}
}
})
If I understand the problem correctly:
You can pass a function into the directive for it to use
<candidates-filter></candidates-filter>
becomes
<candidates-filter add-candidate="addPerson()"></candidates-filter>
and the directive definition changed as follows:
.directive('candidatesFilter', function() {
return {
resctict: 'E',
replace: true,
scope: {
addCandidate: '&addCandidate'
}
templateUrl: 'views/directives/filters/AAAA.html'
link: function(scope, element, attrs) {
scope.someFunctionInDirective = function() {
scope.addCandidate();
}
};
}
})
Alternatively you can call it with the ng-click like normal from the button
Hope this helps clarify it?