I have a html snippet that I'm now having to duplicate a lot which brings me to my question as I'd like to make the html snippet into a directive that can be reused.
I'd like to transform the snippet below into a directive.
<a href="#"
ng-click="vm.orderBy ='UserName'; reverseSort = !reverseSort">
User Name
<span ng-show="vm.orderBy == 'UserName'">
<span ng-show="!reverseSort"><i class="fa fa-sort-alpha-asc"></i></span>
<span ng-show="reverseSort"><i class="fa fa-sort-alpha-desc"></i></span>
</span>
</a>
What I'd like is a directive that allows me to pass any string property to the orderBy field which would make it dynamic.
so something like <my-directive sort = 'Username'></my-directive>
I have vm.orderBy = '' initialised in my main controller.
angular.module('app_name', []).directive('myDirective', myDirective);
myDirective.$inject = ["$scope"]; // dependecny injection
function myDirective($scope) {
return {
restrict: 'E',
templateUrl: 'mydir.tmpl.html',
scope: {
sort: "#"
}
}
}
mydir.tmpl.html
<a href="#" ng-click="vm.orderBy=sort; reverseSort = !reverseSort">
User Name
<span ng-show="vm.orderBy == sort">
<span ng-show="!reverseSort">
<i class="fa fa-sort-alpha-asc"></i>
</span>
<span ng-show="reverseSort">
<i class="fa fa-sort-alpha-desc"></i>
</span>
</span>
</a>
Then use
<my-directive sort = 'Username'></my-directive>
I was able to sort this after all.
.directive("myDirective", function () {
return {
scope:{prop:'#'},
templateUrl:'/templates/Sorter.html'
}
});
and the html like this.
<my-directive prop="UserName"></my-directive>
Related
I started read about modules, components, directives. I would like to ask you to check the code and say how I could improve it. The main thing for me is to figure out how I can improve the transparency of this code. I would also like to learn how to split this code into files, and how it should look like the file structure in this case. I heard that I should make one file for components, But how should it look in the inside?
I would really be grateful for help.
because the most important in the life of the programmer is the code review! :)
(function () {
angular.module('app.navbar', [])
.component('navbar', {
bindings: {
user: '<'
},
controller: function ($scope) {
var navbar = this;
this.$onInit = function () {
navbar.toggle = false;
};
this.activeMenu = function (name, $event) {
this.blockClosingList($event);
if (navbar.toggle === true && $scope.name == name) {
navbar.toggle = !navbar.toggle;
}
else if (navbar.toggle === false) {
navbar.toggle = !navbar.toggle;
}
$scope.name = name;
}
this.blockClosingList = function ($event) {
$event.stopPropagation();
}
},
controllerAs: 'navbar',
template: `
/////// MENU LEFT SIDE ///////
<div class="main-navbar">
<div class="menu-left">
<div class="btns">
<span class="glyphicon glyphicon-align-left btn__glyph"></span>
<span class="btn--name">Tablice</span>
</div>
<div class="btns navbar__search">
<span class="glyphicon glyphicon-search"></span>
</div>
</div>
<div class="navbar__logo">
<span class="navbar--logo">Tasker</span>
</div>
/////// MENU RIGHT SIDE ///////
<div class="menu-right">
<a href="#" ng-click="navbar.activeMenu('Create', $event);">
<div class="btns">
<span class="glyphicon glyphicon-plus"></span>
</div>
</a>
<!-- MENU CREATE -->
<div class="menu menu--create" ng-click="navbar.blockClosingList($event)" ng-class="{active : name === 'Create' && navbar.toggle === true}">
<!--close-->
<menu-create></menu-create>
</div>
<!---->
<!--MENU CREATE BOARD-->
<div class="menu cb__menu-coordinate menu--create-board" ng-click="navbar.blockClosingList($event)" ng-class="{active : name === 'menuCreateBoard' && navbar.toggle === true}">
<span class="settings-menu__header-title">Utwórz Tablicę</span>
<div class="menu__wrapper--create-board center-block">
<menu-create-board></menu-create-board>
</div>
</div>
<!---->
<a href="#" ng-click="navbar.activeMenu('Notice', $event);">
<div class="btns">
<span class="glyphicon glyphicon-bell"></span>
</div>
</a>
<!--NOTIFICATIONS-->
<div class="menu menu--notice" ng-click="navbar.blockClosingList($event)" ng-class="{active : name === 'Notice' && navbar.toggle === true}">
<notifications></notifications>
</div>
<!---->
<a href="#" ng-click="navbar.activeMenu('Profile', $event);">
<div class="btn__circle">
<span class="btn--circle">B</span>
</div>
</a>
<!--MENU PROFILE -->
<div class="menu menu--avatar" ng-click="navbar.blockClosingList($event)" ng-class="{active : name === 'Profile' && navbar.toggle === true}">
<profile-menu></profile-menu>
</div>
</div>
</div>
<!---->
`
})
.component('profileMenu', {
require: {
parent: '^navbar'
},
template: `
<!--close-->
<span class="settings-menu__header-title">
{{$ctrl.parent.user.username}} {{$ctrl.parent.user.role}}
</span>
<ul class="menu__avatar--list">
<li>
Profil
</li>
<li>
<a href="/{{$ctrl.parent.user.username}}">
Karty</a>
</li>
<li>
<a href="/{{$ctrl.parent.user.username}}">
Ustawienia</a>
</li>
<li>
<a href="/logout">
Wyloguj</a>
</li>
</ul>
`
})
.component('notifications', {
require: {
parent: '^navbar'
},
template: `
<!--close-->
<span class="settings-menu__header-title">Powiadomienia</span>
<div class="menu__field--placeholder">
<span>Brak powiadomień</span>
</div>
`
})
.component('menuCreateBoard', {
require: {
parent: '^navbar'
},
template: `
<form>
<div class="form-group">
<label for="">Tytuł</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label for="">Zespół</label>
<input type="text" class="form-control">
</div>
<span class="bottom--create-board">Ta tablica będzie Prywatna. Zmień</span>
<button class="btn btn-success">Utwórz</button>
</form>
`
})
.component('menuCreate', {
require: {
parent: '^navbar'
},
template: `
<span class="settings-menu__header-title">Utwórz</span>
<ul class="menu__create--list">
<li>
<a href="#" ng-click="$ctrl.parent.activeMenu('menuCreateBoard', $event);">
<div class="menu__wrapper-create">
<span class="menu-create__heading">Utwórz tablicę</span>
<span class="menu-create__desc">Tablica składa się z kart uporządkowanych w listach. Użyj jej do zarządzania projektami, śledzenia informacji i organizowania wszystkiego.</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="menu__wrapper-create">
<span class="menu-create__heading">Utwórz zespół</span>
<span class="menu-create__desc">Zespół składa się z ludzi i tablic. Organizuj z jego pomocą firmę, swoją drugą pracę, plany dla rodziny i spotkania z przyjaciółmi.</span>
</div>
</a>
</li>
</ul>
`
})
})();
https://gist.github.com/Turqus/2a791c6b86adfc8b6732711eaec2e23d
in main app:
var App = angular.module('TodoListApp', ['dndLists', 'app.navbar']);
First I would advise you to go here and learn how to use webpack:
https://webpack.github.io/
After you learn how to bundle your files, you should separate templates out of your js files and use templateUrl to load template - you can webpack template loader - works very good.
Then to improve it even further you can learn to use javascript export (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) functionality and separate your code in files.
I like the following directory structure (for example you could use navbar instead of my-component-name):
/my-component-name - directory
my-component-name.component.js - contains my component bindings and templateUrls, also here we import controller for that particular component.
my-component-name.controller.js - sets up controller for component
my-component-name.html - template
my-component-name.scss/less - less/sass file containing isolated styles for that particular component - wrapped in my-component-name {...}
index.js - contains all code put together declaration of angular module, all imports (component,services, directives) and dependencies.
index.js example (you can name it navbar-module.js):
import NavbarComponent from './navbar.component'; // <- here you import component
const NavbarModule = angular
.module('navbar', [])
.component('navbar', NavbarComponent) // <- here you define your component
.name;
export default NavbarModule;
navbar.component.js example:
import templateUrl from './navbar.html';
import controller from './navbar.controller.js'
const NavbarComponent = {
bindings: {
user: '<'
},
templateUrl, // just a shorthand for writing templateUrl: templateUrl
controller, // same as above
}
export default NavbarComponent;
and finally navbar.controller.js:
class NavbarController {
constructor($scope, $timeout) {
this.$scope = $scope;
this.$timeout = $timeout;
}
$onInit() {
// set up your on init code here
this.toggle = true;
}
// set up your functions on controller - they will behave same and you will be able to access them via $ctrl.activeMenu() or $ctrl.blockClosingList() in your templates
activeMenu (name, $event) {
this.blockClosingList($event);
if (this.toggle === true && this.$scope.name == name) {
this.toggle = !this.toggle;
}
else if (this.toggle === false) {
this.toggle = !this.toggle;
}
this.$scope.name = name;
}
blockClosingList($event) {
$event.stopPropagation();
}
}
NavbarController.$inject = ['$scope', '$timeout']; // inject here and put $scope parameter in your constructor
export default NavbarController;
navbar.html - just use your html code it should work fine.
If you need to create some inner functions and keep access to this (controller) you can use arrow functions instead of function (param) {...} just use (param)=>{...} and inside brackets you will have scope of your controller.
One more thing - isolate your components as much as you can and try to communicate to parent components via $emit/$broadcasts instead of requiring parent component like in your example.
Keep in mind what I wrote above is in no way tested and most likely has bugs.
De facto best read about component based architecture in AngularJS can be found here, Todd Motto's styleguide:
https://github.com/toddmotto/angularjs-styleguide
I'd like to produce a recursively structured document corresponding to a tree structure in my model.
The entire document is contentEditable and the models should react to changes made to an <li> within the view.
I'm using the RecursiveHelper module to avoid endless loops. I'm still trying to figure out post-link, compile, etc.
I'm a little confused which elements are associated with which controllers and scopes.
I know that an iscolate scope is being created at each level of recursion, but I'm not sure how that affects my ability to reference variables within that iscolate scope as models to bind to.
In my main.js:
.directive('bullet',function(RecursionHelper){
return {
restrict: "E",
scope:
{
node: '=node',
},
controller: function(),
template:
`
<button class="btn btn-default" ng-click="node.toggleExpanded()" ng-show="node.children.length != 0">
<span ng-show="!node.expanded" class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span ng-show="node.expanded" class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
{{node.content}}
<ul class="list-group-sm" ng-show="node.expanded">
<li class="list-group-item" ng-repeat="child in node.children">
<bullet node="child" ng-model="child"></bullet>
</li>
</ul>
`,
compile: function(element) {
return RecursionHelper.compile(element, function(scope, elm, attrs, ctrl, transcludeFn){
});
}
}
})
Then within my index.html:
<ul class="list-group-sm" contentEditable="true">
<li class="list-group-item" ng-repeat="child in currentBullet.children">
<bullet node="child"> </bullet>
</li>
</ul>
This question already has answers here:
Does AngularJS have a bug when processing a custom directive for an HTML Void Element
(2 answers)
Closed 6 years ago.
what i am trying to do is create the following markup:
<current-user />
this directive should simply inject the current users username just like a binding expression {{currentUser.name}}
here is what i have but i am losing my span tag at the end for the caret:
HTML:
<a href="" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-user"></i>
<current-user />
<span class="caret"></span>
</a>
Javascript:
app.directive('currentUser', function ($rootScope, auth) {
return {
restrict: 'E',
transclude: true,
compile: function (elem) {
$rootScope.$watch('auth.profile', function (profile) {
if (profile) {
elem.html(profile.email);
}
});
}
}
});
any help would be greatly appreciated
This is a known issue with some browsers.
Use a non-self closing directive to fix the problem.
<a href="" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-user"></i>
<current-user></current-user>
<span class="caret">Test</span>
</a>
Working Demo
I want to validate certain condition before the browser follow the link dynamically created by ui-router.
I was looking into $rootscope.$on('$stateChangeStart', ..) but I have no access to the controller.$scope from there. I also need to use this in several places in the application and would be cumbersome.
Keep in mind that ui-sref is linked to ui-sref-active (work together), so i can't remove ui-sref and, by say, to use $state.$go('some-state') inside a function called with ng-click.
The condition should be evaluated inside a $scope function and on on-click event (before-transition with the ability to cancel it)
I need something like this:
<li ui-sref-active="active">
<a ui-sref="somestate" ui-sref-if="model.validate()">Go Somestate</a>
</li>
I tried:
<li ui-sref-active="active">
<a ui-sref="somestate" ng-click="$event.preventDefault()">Go Somestate</a>
</li>
<li ui-sref-active="active">
<a ui-sref="somestate" ng-click="$event.stopImmediatePropagation()">Go Somestate</a>
</li>
And
<li ui-sref-active="active">
<a ui-sref="somestate">
<span ng-click="$event.stopPropagation();">Go Somestate</span>
</a>
</li>
Even
<li ui-sref-active="active">
<a ui-sref="somestate" onclick="return false;">Go Somestate</a>
</li>
But does not work.
SANDBOX
This answer inspired me to create a directive that allows me to interrupt the chain of events that end up changing state. For convenience and other uses also prevents the execution of ng-click on the same element.
javascript
module.directive('eatClickIf', ['$parse', '$rootScope',
function($parse, $rootScope) {
return {
// this ensure eatClickIf be compiled before ngClick
priority: 100,
restrict: 'A',
compile: function($element, attr) {
var fn = $parse(attr.eatClickIf);
return {
pre: function link(scope, element) {
var eventName = 'click';
element.on(eventName, function(event) {
var callback = function() {
if (fn(scope, {$event: event})) {
// prevents ng-click to be executed
event.stopImmediatePropagation();
// prevents href
event.preventDefault();
return false;
}
};
if ($rootScope.$$phase) {
scope.$evalAsync(callback);
} else {
scope.$apply(callback);
}
});
},
post: function() {}
}
}
}
}
]);
html
<li ui-sref-active="active">
<a ui-sref="somestate" eat-click-if="!model.isValid()">Go Somestate</a>
</li>
PLUNKER
You can use a scope function that will either returns :
no state
an existing state
like so :
HTML :
<li ui-sref-active="active">
<a ui-sref="{{checkCondition()}}">Go Somestate</a>
</li>
JS scope :
$scope.checkCondition = function() {
return model.validate()
? 'someState'
: '-' // hack: must return a non-empty string to prevent JS console error
}
href attribute will be created only when the function returns an existing state string.
Alternatively, you could do a (ugly) :
<li ui-sref-active="active">
<a ui-sref="somestate" ng-if="model.validate()">Go Somestate</a>
<span ng-if="!model.validate()">Go Somestate</span>
</li>
Hope this helps
The easiest workaround to conditionally achieve routing without tinkering with directives, scope etc was a workaround i found here - https://github.com/angular-ui/ui-router/issues/1489
<a ui-sref="{{condition ? '.childState' : '.'}}"> Conditional Link </a>
You can always double up on the element and show/hide conditionally
<li ui-sref-active="active">
<a ng-show="condition1" style="color: grey">Start</a>
<a ng-hide="condition1" ui-sref="start">Start</a>
</li>
http://plnkr.co/edit/ts4yGW?p=preview
No need for complicated directives or hacks. The following works fine and allows for specific handling on click of non-sref items:
<a
ng-repeat="item in items" ui-sref="{{item.sref || '-'}}"
ng-click="$ctrl.click(item, $event)"
>...</a>
And in the controller, a simple click handler for the items which don't have an item.sref:
this.click = function(item, event) {
if (!item.sref) {
event.preventDefault();
//do something else
}
};
Based on the answers to How to dynamically set the value of ui-sref you can create a function in your scope for building the URL:
$scope.buildUrl = function() {
return $state.href('somestate', {someParam: 'someValue});
};
And then conditionally append it to the link with ng-href
<a ng-href="{{ someCondition ? buildUrl() : undefined }}">Link</a>
As you can see in the demo below, ng-href does not add the href attribute if value is negative.
angular.module('app', [])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<a ng-href="{{ condition ? 'http://thecatapi.com/api/images/get?format=src&type=gif' : undefined}}">This is the link</a>
<br>
<label for="checkbox">
<input type="checkbox" id="checkbox" ng-model="condition">
Link active?
</label>
</div>
I know this is an old question, but for future reference I wanted to offer an alternative solution since I didn't see it in any of the answers so far.
Desired:
<li ui-sref-active="active">
<a ui-sref="somestate" ui-sref-if="model.validate()">Go Somestate</a>
</li>
Potential solution (template):
<li ng-class="{ active: state.current.name === 'somestate' }">
<a ng-click="navigateToState()">Go Somestate</a>
</li>
And in the controller:
$scope.state = $state;
$scope.navigateToState = navigateToState;
function navigateToState() {
if ($scope.model.valid) {
$state.go('somestate');
}
}
Possible solution for those who still need ng-click working on ui-sref component or its parents.
My solution is to use href instead of ui-sref and to modify Emanuel's directive a bit to be able to stop href and ng-click calls separately.
Planker.
Though it has a few restrictions:
will not work with ui-sref
you should have different urls for each state because of previous restriction
ui-sref-active will not work either
For the binary case (link is either enabled or disabled), it "now" (since ~2018) works like this (prevents the click and sets it to disabled):
<a ui-sref="go" ng-disabled="true">nogo</a>
and for other tags as well:
<span ui-sref="go" ng-disabled="true">nogo</span>
So here is my issue, I can't get my $scope.documents to update from my directive.$scope.parentUpdate({ documents: $scope.docType}) does not seem to execute at all an so my documents never updates. $scope.docType= resultgets all the data I need but it just does not push it back to the parent controller.
app.controller('docGridController',['$scope','getSideNav', 'getDocuments',
function($scope, getSideNav, getDocuments){
getSideNav().then(function(result){$scope.SideNav = result;
},
function(error){$scope.error = result;});
$scope.slideToggle = true;
$scope.documents=[];
$scope.update = function(k){
$scope.documents = k;
consle.log($scope.documents);
}}]);
app.directive('foSidenav',['getDocuments',function(getDocuments){
return{
replace: true,
scope: {
info:'=',
docType:'=',
parentUpdate:'&'
},
templateUrl:function(element,attr){
return attr.url;
},
controller: ['$scope','$element', '$attrs' ,'getDocuments',
function($scope,$element, $attrs, getDocuments){
$scope.selectDocType = function(id)
{
getDocuments(id).then(function(result){$scope.docType= result;
console.log($scope.docType);
alert('Printed results');
$scope.parentUpdate({ documents: $scope.docType});
},
function(error){$scope.error = result;});
};
}]
};
}]);
Here is the tag I am using in my template
<ul class="side-nav">
<li class="mainCat" ng-repeat=" item in info">
<a href="#" id="CatHeader" ng-click="slideToggle =! slideToggle">
<i class="{{item.displayIcon}} left-bar"></i>
<span ng-bind-html="item.label | html"></span>
</a>
<ul class="subCat slide-toggle" ng-show="slideToggle">
<li ng-repeat="subItem in item.docTypes">
<a href="#" ng-click="selectDocType(subItem.id)" >
<i class="fi-folder"></i>
<span ng-bind-html="subItem.Name | html"></span>
</a>
</li>
</ul>
</li>
and here is the directive call
<fo-sidenav url="{!URLFOR($Resource.FOPS_Resource, 'components/sidenav.html')}" info='SideNav' docType='documents' parentUpdate="update(documents)"></fo-sidenav>
Any ideas?? these scope are really throwing me off
I think the issue is with how you are using the variables from your isolated scope in the html. Now you are using them like below:
<fo-sidenav url="{!URLFOR($Resource.FOPS_Resource, 'components/sidenav.html')}"info='SideNav' docType='documents' parentUpdate="update(documents)"></fo-sidenav>
Try like the following:
<fo-sidenav url="{!URLFOR($Resource.FOPS_Resource, 'components/sidenav.html')}" info='SideNav' doc-type='documents' parent-update="update(documents)"></fo-sidenav>
For more information about read Matching Directives and Normalization sections here