# Category: angular-directive

## AngularJS directive to add content after element and trigger element click

how to AngularJS directive to add content after element and trigger element click I’m trying to create a very simple directive to ask confirmation on a button click. The following html: <button kr-confirm>Delete</button> Should compile into: <button kr-confirm>Delete</button> <span ng-show=”vm.isOpen”> Are you sure? <span class=”btn btn-sm btn-danger”>Yes</span> <span class=”btn btn-sm btn-secondary”>No</span> </span> I wanted to handle this in templateUrl, but could not find an option to add template after element. I ended up adding DOM […]

## Append to an element by id not working through directive

how to Append to an element by id not working through directive I have following HTML: <div class=”row list-bottom-margin” id=”test”> <div class=”col-lg-4 col-md-4 col-sm-4″> <div class=”right-inner-addon”> <form ng-submit=”submit()”> <input type=”search” class=”form-control” placeholder=”Search…” ng-model=”searchText”> </form> </div> </div> <!– I want to add an element here –> </div> </div> <div ng-show=”ag_grid_item_total > 0″> <div id=”ag_grid_table” ag-grid=”::ag_grid_options” class=”ag-bootstrap-striped” export-data> <!– My directive –> </div> </div> I want to add following div using my directive: <div class=””> <button class=”btn” […]

## Switch AngularJS datepicker language

I have a set of angularjs datepickers and we are localizing an entire website for multiple languages. Users can switch language of the page with a drop down. For labels we use angular translate, thus simply add | translate filter and loading it from relevant json translation files. The confusion is with datepicker, I know I can include scripts from angular-i18n locale from below link and the datepicker loads one particular language. But the question […]

## How to pass the results from a rendered directive as variable to angular-translate

I have a (rather complex) directive that can render amounts in a currency. It formats the currency based on the rules of that currency (e.g. if a currency has cents etc.) and formats the number and symbol based on the locale. I’d like to use the outcome of the directive as a variable in a translation. There is a plunker with a simplified setup here In short, what I’d want: Your balance: <strong currency data-amount=”-1337″ […]

I have tried adding attributes such as ng-required=”true” and ng-pattern=”/^(d)+$/” dynamically as DOM is compiled by Angular. They are added and appear on the element when I inspect the element, however they do not appear to be initialised and do nothing. I did this using the directive below, I pass the inp object into the directive scope from the template as it’s compiled, the inp object contains all the data about how the input should […] ## Unit test Angular directive and create two elements with specific scope.$id

I have a really strange task to compile two elements in my unit test and check them scope.$id. I try to explain at example 🙂 Directive code: import _ from ‘lodash’; export function ensureUniqueValues(resourcesStorage) { return { require: ‘ngModel’, link(scope, el, attrs, ngModel) { let stateValidation; const uniqueLabel = attrs.ensureUniqueValues.replace(/[-+()s]/g, ”); const setValidity = (element, state) => { element.model.$setValidity(‘ensureUniqueValues’, state); }; const validation = (value) => { console.log(‘resourcesStorage.resources’, resourcesStorage.resources); const filteredResources = _.filter(resourcesStorage.resources, { id: […]

## Why does my angular1.6 controller not bind correctly when I have a break point

HB.Core.Directives.directive(‘hbMultiselect’, [ function() { return { restrict: ‘E’, templateUrl: ‘/hb-core/library/directives/hb-multiselect/hb-multiselect-ptl.html’, scope: {}, controllerAs: ‘$ctrl’, bindToController: { optionsData: ‘<‘, optionsSelected: ‘=’, allSubtypesSelected: ‘=’ }, controller: function() { var$ctrl = this; // $ctrl.$onInit = function() { // console.log(this); // Tried this… didn’t work either // }; function init() { $ctrl.isExpanded = false;$ctrl.optionsDisplay = []; $ctrl.tags = []; console.log(“——“) console.log($ctrl); console.log(“——“) >>>>>>>>>>>>>>>>>>>>**BREAK POINT HERE** } init(); } }; } ]); When I run the code without […]

## Routing issue with angular directives

I’m trying to setup one of my first angular projects and am having trouble getting to grips with the routing. On page load I see the initial template that has been set by the preferencesDirective, which is great. When I click the “Change Template” button I want it to change to another template but nothing happens. If I set the template url’s in the \$routeProvider to something invalid then I see a 404 error in […]