Search Posts

Category: angularjs-directive

AngularJS tooltip directive not closing on iPhone 6

I’m trying to solve a bug on a tooltip directive written in AngularJS. We are creating a tooltip using a nested HTML already declared in the DOM, the directive is below. The tooltip works fine on desktop with the tooltip showing on mouse enter and hiding on mouse leave, but on an iPhone 6, the user cannot dismiss the tooltip. Desired behaviour would be to allow the user to click elsewhere on the page in […]

How to update angularjs component property binded to input set with element.val in test

I’ve implemented the foo component whose template has an input (binded to fooValue property) with a directive attribute that calls that component controller function onEnter when “enter” key is pressed when the input has focus. The issue that I’m getting is, after inserting a value in the input (i.e. “foo3”) and pressing “enter” key, fooValue is not update with the input value. Here is the snippet: var app = angular.module(‘app’, []); app.component(‘foo’, { template: ‘<input […]

Angular js ng-Options adding extra option as default [duplicate]

This question already has an answer here: Why does AngularJS include an empty option in select? 25 answers I have been troubling to fix this, i just wanted my dropdown to use my supplied value as selected. My HTML: <select ng-init=”status[lot.mid]='{{lot.status}}'” ng-model=”status[lot.mid]” ng-options=”x.title for x in lotstatus track by x.title”></select> My Controller: $scope.lotstatus = [{“title”:”Available”},{“title”:”On Hold”},{“title”:”Under Contract”},{“title”:”Reserved”},{“title”:”Sold”}]; Firebug: I wanted the avaiable option be selected. Its a table which has multiple rows with same kind […]

Call a Javascript function(for DOM change) after $http returns in a directive

I have a directive on a button which on submit makes an http call. Once that call returns I want to make a change in DOM i.e. show a snackbar notification that this job has been done. (function () { angular .module(‘test.module’) .directive(‘onsubmitDoX’, doX); function doX($parse) { var linkFn = function(scope, element, attr) { var templateFn = $parse(attr.onsubmitDoX); $(element).on(‘submit’, function(e) { templateFn(scope).then(function(data) { console.log(data); snackbar(‘Done’); }, function(err) { console.log(err); }) }); } return { restrict: […]

AngularJS datetimepicker directive not work when change value

I have a problem with datetimepicker in AngularJS. When the page loaded, datetimepicker directive run, and I got the right value I want. But when I chose another date, directive does not work, although I have to change the event inside. A few days ago, It worked, but not now. I tested many times. I don’t know why, because I didn’t change anything. The code: .directive(“datetimeselect”, [ “Config”, function (Config) { return { restrict: ‘A’, […]

How do I do some action after ng-if, ng-show etc happens in AngularJS?

I am working on a workaround using position: absolute that needs the position of a div to be calculated. <html> <!– this iframe will positioned by an angular partial through a directive –> <iframe style=”position: absolute; width: 400px; height: 400px”;></iframe> <div id=”angular”></div> <html> It works fine for static partials like this: <div id=”dummy” style=”width: 400px; height: 400px;”></div> <reposition></reposition> but for dynamic partials that have ng-if or ng-show it won’t work because the calculated positions will […]

Difference between elem and elem[0] in angularJS custom directives?

angular.module(‘todomvc’) .directive(‘todoFocus’, function ($timeout) { ‘use strict’; return function (scope, elem, attrs) { scope.$watch(attrs.todoFocus, function () { $timeout(function () { elem[0].focus(); }, 0, false); }); }; }); I was analyzing a custom directive of a JS sample code (angularJS) lately and I came across this line which frustrated me. elem[0].focus(); When I tried to change elem[0].focus(); to elem.focus(); The whole directive just doesn’t work. But in my previous attempt to create a custom directive that […]

Use ng-model to avoid $digest delay in Component Directives

How to call controller’s any function in directive in angularJs I’m trying to call parent controller’s function, which has not much to do with the directive, when directive’s bind value has changed. I’ve been looking through the Q&A in stack, but all of them are related to passing a value from directive to controller, which is not my case. I thought my case was generally common, the scenario is that: display complex objects in a […]

How to invoke controller function with directive expression `&` binding

Function callback after end of animation is undefined – angularjs I am trying to make a callback as soon as the animation ends. Here’s the example that I tried. Please open the chrome debugger to see the console log messages. The callback is coming back as undefined. Could you please help me understand why the callback is not picking up? Here’s the code snippet. More details are available in the link above: angular.module(‘animApp’, [‘ngAnimate’]) .controller(‘mainCtrl’, […]

Function callback after end of animation is undefined – angularjs

I am trying to make a callback as soon as the animation ends. Here’s the example that I tried. Please open the chrome debugger to see the console log messages. The callback is coming back as undefined. Could you please help me understand why the callback is not picking up? Here’s the code snippet. More details are available in the link above: angular.module(‘animApp’, [‘ngAnimate’]) .controller(‘mainCtrl’, function($scope) { $scope.loadUrl = function(event) { console.log(“i am here”); } […]

Next Page »