Angular apply class in directive

Issue I have a angular directive which will produce bootstrap form-group, looks for $scope.errors for value of ng-model of the directive to show errors.. Example below: My html code: <input type=”text” b-input ng-model=”data.company.name” label=”Company Name” class=”form-control”/> and my directive code:

Continue reading

Angular dirrectives and ng-class

Issue Suppose a directive with html e.g. in component.html like <div class=”text-field” ng-class=”{‘classA’: varA}”> …. </div> then I’m trying to do… <component ng-class=”{‘classB’: varB}”></component> After that in ng-class I’m having something like {‘classB’: varB} {‘classA’: varA} that is obviously not

Continue reading

Call multiple modules in a single page?

Issue I created module1 and module2 in a single page. module1 is working fine, module2 is not working. Please suggest how to call module1 and module2 correctly in a single page. <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title></title> <script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script> <script> var mymodule1

Continue reading

Functionality of ng-app directive in AngularJs

Issue please observe the code snippets I’ve provided below. Case 1: AngularJS Sample Application <div ng-app = “”> <input type=”text” autofocus=”autofocus” placeholder=”Enter your name” ng-model=”name”><br> Hai {{name}}! </div> Case 2: AngularJS Sample Application <div ng-app = “mainApp”> <input type=”text” autofocus=”autofocus”

Continue reading

Functionality of ng-app directive in AngularJs

Issue please observe the code snippets I’ve provided below. Case 1: AngularJS Sample Application <div ng-app = “”> <input type=”text” autofocus=”autofocus” placeholder=”Enter your name” ng-model=”name”><br> Hai {{name}}! </div> Case 2: AngularJS Sample Application <div ng-app = “mainApp”> <input type=”text” autofocus=”autofocus”

Continue reading

Load directive after AJAX call

Issue I have build a directive for pagination that takes two arguments; the current page and the total number of pages. <pagination page=”page” number-of-pages=”numberOfPages”></pagination> The issue is that I will only know the value of numberOfPages after an AJAX call

Continue reading

AngularJS read data from controller to table

Issue I simply try to read out data from the balanceTableCtr and show it in the balanceTable. But it just shows me an empty table. balanceTableCtr.js: (function () { ‘use strict’; angular.module(‘BlurAdmin.pages.dashboard’) .controller(‘BalanceTableCtrl’, BalanceTableCtrl); /** @ngInject */ function BalanceTableCtrl($scope) {

Continue reading

AngularJs: Required field validation and highlight for dynamic rows of HTML table with contenteditable

Issue I have an HTML table as below: <tbody> <tr ng-repeat=”r in targetTable.rows”> <td contenteditable=”true” class=””></td> <td contenteditable=”true” ng-repeat=”column in targetTable.columns” ng-model=”r[column.id]” ng-blur=”!r.id? addNewRow(r[column.id], r): undefined”> </td> </tr> </tbody> I am using the contenteditable directive to make the cells editable.

Continue reading

AngularJS – how to use ng-required only for active fields

Issue I have an application where toggle button is, and when clicked, it activates fields for user input. Fields are on one page, button is calling like this: <span ng-include=”‘partials/triggers/toggleButton.html'”></span> <a ng-click=”toggle()”> <span class=”glyphicon” ng-class=”{‘glyphicon-ban-circle’: t.active, ‘glyphicon-ok-circle’: !t.active}”></span> </a> <div

Continue reading

ng-class on selected element Angularjs

Issue I have a situation where i am sorting data on the basis of expression: html : <ul> <li ng-click=”expression = ‘created_at'” ng-class=”latest_icon: ‘selected'” >latest post</li> <li ng-click=”expression = ‘popularity'” ng-class=”popular_post: ‘selected'” >popular post</li> </ul> <div ng-repeat = “data in

Continue reading

ng-class strange behaviour after after $compile

Issue I have made following directive: (function () { ‘use strict’; angular .module(‘app.widgets’) .directive(‘zzForminput’, formInput); function formInput($compile) { // Usage: // <div zz-forminput></div> function setupDom(element) { var input = element.querySelector(“input, textarea, select”); var type = input.getAttribute(“type”); var name = input.getAttribute(“name”);

Continue reading

using ng-class in angular js

Issue I am trying to implement ng-class directive in angular and while doing so am a bit stuck on it.. The below is the code snippet:- <button ng-class=”{discover_premium btn btn-lg:userLogin ==2,discover_connect_btn btn btn-lg:userLogin ==3}” >{{userLogin}}</button> I am using the following

Continue reading

how to get ng-class value in directive

Issue I have some repeated ‘li’ elements, and some of them has ‘active’ class like this <li ng-repeat=”menuSubItem in menuItem.items” ng-class=”{active: vm.currentMenuName == menuSubItem.name}” active-collapsible> in the othe hand, I have a directive to add some classes depend on ‘active’

Continue reading

AngularJS – Toggle class using ng-class directive

Issue Directive scope.pauseClass = ‘fa fa-pause’; scope.muteClass = ‘fa fa-volume-on’; <button ng-click=”doPlayOrPause(uniqId)”><i ng-class=”pauseClass”></i></button> <button ng-click=”doMute(uniqId)”><i ng-class=”muteClass”></i></button> scope.doMute = function(){ var vlc = scope.getVLC(“vlc”); if (vlc && vlc.playlist.isPlaying) { vlc.audio.toggleMute(); scope.controlClass = ‘fa fa-volume-off’; }else{ scope.controlClass = ‘fa fa-volume-on’; } }

Continue reading

pass ng-class condition in angular directive

Issue I have a directive: angular.module(“App”).directive(‘myDirective’, function () { return { restrict: “E”, }, templateUrl: “MyDirective.html” } }); Template: <input Value = “Test” ng-class=”{{ngclass}}”/> HTML: <my-Directive ng-class=”{‘ng-invalid’: param === false }”/> Is it possible to pass the ng-class condition into

Continue reading

Declare Angular Directives purely in HTML?

Issue (Highly related to my other question on Programmers.SE: https://softwareengineering.stackexchange.com/questions/280249/whether-to-abstract-small-repeating-code-segments-in-html-templates) When I want to reuse a few lines of HTML, it is really annoying that I have to write some JavaScript boilerplate in another file just to create a Directive.

Continue reading

Unable to access scope property set by $http.get in directive

Issue I’m using this app.js file: var myNinjaApp = angular.module(‘myNinjaApp’, []); myNinjaApp.directive(‘randomNinja’, [function(){ return { restrict: ‘E’, scope: { theNinjas: ‘=’, title: ‘=’ }, template: ‘<img ng-src=”{{theNinjas[random].thumb}}”/>’, controller: function($scope) { let length = $scope.theNinjas.length; //$scope.theNinjas is undefined $scope.random = Math.floor(Math.random()

Continue reading

What is Default Header Cell Template of UI-GRID?

Issue The ng-grid documentation contains default Header Cell Templates (as well as other default templates). What is the default header cell template for ui-grid? Solution Per the githubs https://github.com/angular-ui/ui-grid/tree/master/packages/core/src/templates/ui-grid The current default header cell template is <div ng-class=”{ ‘sortable’: sortable

Continue reading

Binding mutually dependent but different data formats to inputs in Angular

Issue As an exercise, I’m creating inputs for color values using both RGB and hex. html: <form ng-controller=”myCtrl”> R:<input ng-model=”rChannel” type=”number” min=”0″ max=”255″ required></input> G:<input ng-model=”gChannel” type=”number” min=”0″ max=”255″ required></input> B:<input ng-model=”bChannel” type=”number” min=”0″ max=”255″ required></input> hex: #<input ng-model=”hexColor” type=”text”

Continue reading

Angular adds strange options into select element when setting model value

Issue I have a select element defined as such: <select name=”country_id” id=”country_id” required=”required” ng-model=”newAddressForm.country_id”> <option value=””>Select Country</option> <option ng-repeat=”country in countries” value=”{{country.id}}”>{{country.name}}</option> </select> All works fine when I’m not setting any kind of value in the directive which contains this

Continue reading

Form Validation angular/bootstrap

Issue Here’s FIDDLE Not able to understand that why the required validation is not working ?? HTML <div ng-app=”app”> <div ng-controller=”myctrl”> <form name=”myform” class=”form form-horizontal” novalidate> <fieldset class=”fieldset” ng-show=”payment == ‘bankAccount'” class=”form-group clearfix”> <ul class=”form-group”> <li ng-class=”{ ‘has-error’: myform.routingNumber.$invalid, ‘has-success’:myform.routingNumber.$valid}”>

Continue reading

Angular setValidity not working when HTML is produced in a Directive

Issue I have dynamic html that i make in a directive, and it includes an input element with validation. Example HTML produced with error message: <input id=”bob” class=”personCheckbox” name=”bob” type=”checkbox” value=”bob” ng-model=”foobar” validate-foo/> <span style=”color:red” ng-show=”myForm.bob.$error.summary”>Need Summary</span> <input type=”text” name=”summary-bob”

Continue reading

What is the better way to add office 365 javascript api library to angular js project?

Issue Officejs library can be used inside angular controller as following way by adding library reference https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js to index page function sendRequest() { // Create a local variable that contains the mailbox. var mailbox = Office.context.mailbox; mailbox.makeEwsRequestAsync(getItemRequest(mailbox.item.itemId), callback); } function

Continue reading

angularjs autosave form is it the right way?

Issue My goal is to autosave a form after is valid and update it with timeout. I set up like: (function(window, angular, undefined) { ‘use strict’; angular.module(‘nodblog.api.article’, [‘restangular’]) .config(function (RestangularProvider) { RestangularProvider.setBaseUrl(‘/api’); RestangularProvider.setRestangularFields({ id: “_id” }); RestangularProvider.setRequestInterceptor(function(elem, operation, what) {

Continue reading

Pass callback function to directive

Issue I’m trying to pass a callback function from a controller to a directive. Here’s the callback function code: $scope.onImageSelect = function(image) { alert(‘SET’); $scope.card.image = image; }; Directive usage: <google-image-search callback=”onImageSelect” /> Directive code: ngmod.directive(‘directive’, function() { return {

Continue reading