FAQ Database Discussion Community


A confusing case when using controller and controllerAs in a directive

angularjs,angularjs-directive
If a directive is using a controller directly, why is calling a method on the controller by referring the controller by its alias, not doing anything? Imagine we have the following piece of code: var app = angular.module('App', []); app.controller('MyController', ['$scope', function($scope) { $scope.doAction = function() { alert("controller action"); }...

Custom directive using ngModelController not updating UI value

angularjs,angularjs-directive
I am trying to create a directive that formats a decimal value to a time value h:mm. If a user enters a time value the model should be updated with the decimal representation. If a user enters a decimal value his input should be replaced with the formatted value. I...

Confuse about the AngularJS scope when multiple directives share same element

angularjs,angularjs-directive,angularjs-scope
All: I'm new to AngularJS directive scope and I want to know how AngularJS deals with scope when multiple isolated-scope directives are assigned to teh same element. For example: app.controller("main", function($scope){ $scope.data = [ { id:"id_1" }, { id:"id_2" }, { id:"id_3" }, { id:"id_4" } ]; }); app.directive("isodir", function(){...

Pass scope to element.after()

angularjs,angularjs-directive
The below is called in my HTML: <input data-autocomplete> There is a parsing error (basic HTML error) because when data-autocomplete is ran, it calls another directive inside its HTML: data-autocomplete-results. When this is run/compiled, it creates a div inside of the <input> element and because that is bad HTML it...

Same “controller as” name in angular js directive breaks function in parent controller

javascript,angularjs,angularjs-directive,angularjs-controller
I've a controller with some items for ng-repeat and each item should get a random color so I use ng-style with a function in that controller called randColor(...). app.controller('TestController', function() { var vm = this; vm.items = [ { name: 'item 1' } , { name: 'item 2'} ]; vm.randColor...

how to write a directive that restricts post requests

angularjs,angularjs-directive
I am adding an new user profile that has read-only access to my restful app. My app only uses get and post requests (no put, delete, etc.) A user with read-only access cannot create, edit, or delete any data (can only view data). In other words, cannot perform any POST...

why margin-right is not working in ionic + angular js

javascript,jquery,angularjs,angularjs-directive,angularjs-scope
I am trying to give a margin to a div.But it is taking margin-left but not taking margin right why ?Actually I have scrolling div in which content is scroll I want to give some margin from left as well as from right .So I give margin in % but...

why array become blank after splitting into multiple small array?

angularjs,angularjs-directive,angularjs-scope
hello I have one a array $scope.name .I am spliting the array into small arrays .But after spliting the array .it become blank why ? actually I assigned the given array into temp variable and splite the temp variable .Again my $scope.name become blank why ? here is my plunker...

How to set background colour when click on an item?

angularjs,angularjs-directive,angularjs-scope
HTML <ul class="ul_nav"> <li ng-class="class" ng-click="changeClass()">Marketing</li> <li ng-class="class" ng-click="changeClass()">Sells Team Nestle</li> <li ng-class="class" ng-click="changeClass()">Marketing Test</li> <li ng-class="class" ng-click="changeClass()">Marketing </li> </ul> Angularjs $scope.changeClass = function(){ if ($scope.class === "nav_color") $scope.class = "nav_active"; else $scope.class = "nav_color"; }; CSS .ul_nav{ margin-top:15px; list-style:none;...

AngularJs + DateRangePicker: my ng-model is not getting the input text value when I select a date range

html,angularjs,angularjs-directive,daterangepicker
In the HTML below, I'm trying to set the selected date range in an ng-model called dateRange. The input text field is getting the selected value correctly, but dateRange still null. What do have I do to solve this problem? <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript"...

Pass variable from directive to controller

javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-controller
I have this directive definition and want to pass currentScriptPath to the TestController. How do I do that? (function(currentScriptPath){ angular.module('app', []) .directive('test', function () { return { restrict: 'E', scope: {}, templateUrl: currentScriptPath.replace('.js', '.html'), replace: true, controller: TestController, controllerAs: 'vm', bindToController: true }; }); })( (function () { var scripts...

How to access ng-repeat item object into directive and child scope?

javascript,angularjs,angularjs-directive
I am using ng-repeat in a custom element directive. Two similar questions: How do I access the enumerated item from the directive's link handler? How do I access the enumerated item from the item's controller? In my example, in MyItemCtrl, in $scope.myItemClicked. Working plunker: http://plnkr.co/edit/64PiskrR7aGFKfrSq1up?p=preview My main HTML looks like...

Directive with transclude, data binding not working in templateUrl

angularjs,angularjs-directive,angularjs-scope,directive
I have a directive with transclude:true. However, the data binding works when i use a template:"" but not when i use templateUrl:"" Below you can find my directive. The rsCarousel.html template contains the same code as the template"" property. When using the template property i get the vm.carouselId on screen...

password check directive elem.add error

javascript,angularjs,validation,events,angularjs-directive
I'm making a password checking directive to ensure password and confirm_password fields are the same: angular .module('myModule') .directive('pwCheck', function() { return { require: 'ngModel', link: function (scope, elem, attrs, ctrl) { var password = "#" + attrs.pwCheck; elem.add(password).on('keyup', function() { scope.$apply(function () { ctrl.$setValidity('pwmatch', elem.val() === $(password).val()); }); }); }...

how to separate scopes without isolate scope?

javascript,angularjs,angularjs-directive,isolate-scope
Isolate scope is inconvenient because the directive stops inheriting from the parent scopes. So right now when I want to use the same directive within the same scope I am using ng-if to separate the directive scopes like so: <some-directive ng-if="true" var1="'wtva'" var2="{{wtv2a}}" var3="wtv2a" ></some-directive> <some-directive ng-if="true" var1="'wtvb'" var2="{{wtv2b}}" var3="wtv2b"...

Angular JS service dependency injection error

angularjs,angularjs-directive,angular-resource,angular-services
I am new to angular I have been trying to do asynchronous validation for username availability and I am getting "Cannot read property 'userName' of undefined" Here is my service code webAppServices.factory('services', ['$resource', function ($resource){ return{ users: $resource('http://localhost:8080/api/users',{},{ get:{method:'GET',isArray:true}, add:{method:'POST',isArray:false}, update:{method:'POST',isArray:false} }), userName:$resource('http://localhost:8080/api/users/check/:username',{},{ check:{method:'GET',isArray:false} }) };}]);...

angularJs filter in ng-repeat

angularjs,filter,angularjs-directive
I am trying to provide a pagination to a table: Let's say there are 100 records and records per page is 10. If I am in 3rd page, records from 21 to 30 should be prepared in the table. So I am trying to filter those records using angular filter...

Angular directive that requires another directive that uses an Attribute defined controller

javascript,angularjs,angularjs-directive
I'm learning angular and when I was studying custom directives I got stuck in a situation that I don't know how to solve. Here are my custom direcives: /** * Created by Lucas on 11/06/2015. */ 'use strict' eventsApp .directive('greeting',function() { return { restrict: 'E', replace: true, template: "<button class='btn'...

How Do I call and pass data to a Directive from a Controller Angular

angularjs,laravel,angularjs-directive,controller
I have a QueueController.js which handles AJAX query. How do I pass the data from my CONTROLLER to my DIRECTIVE and show it to the Modal. Thanks. QueueController.js app.controller('QueueController', function($scope, $http, $interval, $modal) { $scope.Call = function(trans_id){ $http({ url: $locationProvider + 'query_stransaction', method: "GET", params: { trans_id: trans_id } }).success(function...

Why my directives don't work in Plunker?

angularjs,angularjs-directive,plunker
I was going to use Plunker to assist me in testing a directive, but first I just wanted to create one to test plunker was working, so I put in some sample code. Guess what, basic directives are not working and I have no idea why. My directives: app.directive('attributeDirective', function()...

how to display sorted only 25 element in infinite scroll?

javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
I am using infinite scroll in my demo ,In which I am showing only 25 element first time .When user scroll down to bottom it load more data and display that more data .It is do repeat steps if user want whole data to display (scroll to bottom load more...

Why the data is not displayed in view may I use $scope.apply?

angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
I am getting data from service and display on view using ng-repeat .Actually I am getting event when user scroll to bottom mean when user reached to bottom I will do something.When It reached to bottom I am changing the contend of my array .I am getting the correct contend...

How to use an isolated scope property properly?

angularjs,angularjs-directive,angularjs-watch,controlleras
How to use an isolated scope property properly? I have a directive, that is called from a page controller, with an attribute item passed to it, e.g. <my-directive item="myItem"></my-directive>, containing an id. The code below will not work, as it seems like $scope.item is undefined in the controller.. like I'm...

Angular scroll directive

angularjs,angularjs-directive,responsive-design,angular-ng-class
I try to create a directive with two params, class and pageYOffset. I would like to check the scrolling position of my element and add a class name if the pageYOffset is bigger than the number in the attr. Somehow I cant't trigger the class changes. HTML <div scroll offset="1500"...

AngularJS directive for validation

javascript,html,angularjs,angularjs-directive
I am trying create a custom directive to validate an input field's text against a list. For example I have a list defined in my controller: $scope.examples = [ {"name":"Jeff"}, {"name":"John"}, {"name":"Sarah"}, {"name":"Julie"} ]; and my directive looks something like this: .directive('customValidation', function () { return { restrict:'A', require: 'ngModel',...

Angular directive not applied on change of the value

javascript,angularjs,angularjs-directive
I have a directive like testApp.directive('changeValue', function(){ alert("coming"); return { restrict: 'E', link: function (scope, element, attrs) { element.text(attrs.val); }, replace: true }; }); and I have my views as follows <change-value val="{{test.val}}"/> When I refresh my page, I could see the values and I get the alerts. But when...

Angular directive does not call parent scope function

angularjs,angularjs-directive
I am trying to call a parent function from a directive. But my functions are not being called. I am sure I am missing something here. I would really appreciate your help. Here is the code for your reference. Controller 'use strict'; angular.module('myApp') .controller('MyCtrl', function($scope) { $scope.iconSelected = function() {...

AngularJS Material using $mdDialog in a directive linking function

javascript,angularjs,angularjs-directive,angularjs-scope,angular-material
I am trying to put an Angular Material dialog in a directive's linking function. Conceptually, I'm not seeing why this would not be possible. As per the docs, the $mdDialog.show is on a scope and $mdDialog.hide(); rests in a controller defined by the $mdDialog.show object. I've been able to get...

why after loading more data filter stop working?

angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
there is one filter functionality in my demo I will explain my problem I have one table in which i use infinite scroll is implemented In other words when user moves to bottom it load more data.There is search input field in top .Using this I am able to filter...

custom directive parameters declaration differences

angularjs,angularjs-directive,angularjs-scope
I am wondering about the differences between declaring custom directive parameters in these three ways : js : app.directive('customDirective', function() { return { restrict: 'E', scope : { x : '=', y : '=y', z : '=?' } , } }); I am monitoring the three seems same behavior. Can...

Dynamically build table after it recieves information from service

javascript,html,angularjs,asynchronous,angularjs-directive
HTML Code: <table class="table table-bordered table-striped"> <thead> <tr> <td>one</td> <td>two</td> <td>three</td> </tr> </thead> <tbody> <tr ng-repeat="color in colors"> <td>{{ color.one }}</td> <td>{{ color.two }}</td> <td>{{ color.three }}</td> </tr> </tbody> </table> Controller: var SomeController = function ($scope, SomeService, $window) { var colors= []; SomeService.someFunction().success(function...

AngularJS nav active class won't show

javascript,angularjs,angularjs-directive,angularjs-scope
I'm Quite new to AngularJS and I try to develop a nav bar, which changes the activeclass. So I tried to make a function in my controller to define the active class. My html code of the nav: The controller: I compiled with grunt and there are no errors/warnings. Every...

Covert encoded HTML in string to plain text for Input Fields using Agular

javascript,html,angularjs,angularjs-directive,angularjs-filter
I have a use case, where we can have '&#' characters inside of a JSON. Name: "Kenneth Hinsvark &#38; Maurice McAlister" Address: "555555 W. Canyon Dr &#35; B212" The string values are pulled back from a database. Apparently the values were saved to the DB with HTML encoding. I need...

why float right is not working also used important?

javascript,angularjs,css3,angularjs-directive,ionic-framework
I have three image buttons in my header which is in right side as show in image ,I am trying to add three buttons on header .But it is not taking float:right and margin-right .I need to make like this please check image ![enter image description here][1] I have "+"...

How can I add a directive from a module to a controller?

angularjs,angularjs-directive,angularjs-controller
I've seen directives created like so: angular.module('docsSimpleDirective', []) .controller('Controller', ['$scope', function($scope) { $scope.customer = { name: 'Naomi', address: '1600 Amphitheatre' }; }]) .directive('myCustomer', function() { return { template: 'Name: {{customer.name}} Address: {{customer.address}}' }; }); The myCustomer directive is now on the Controller controller. If I define my module and controller...

Adding directives to an element using another directive

angularjs,angularjs-directive
I am trying to create a directive that adds some html code but also adds additional attributes/directives. Using the code below, an ng-class attribute is indeed added, but it seems angular does not recognize it as a directive anymore. It is there, but it has no effect. How can I...

Angular JS - Load a template html from directive on click of a button

javascript,jquery,html,angularjs,angularjs-directive
I am trying to load a HTML template when a link is clicked. I have made a directive that contains templateUrl which loads a HTML file. I am calling a function when a link is clicked that appends a div with our custom directive "myCustomer" to a div already in...

Running script within ui-router TemplateURL

javascript,angularjs,angularjs-directive,angular-ui-router
I currently have a single page web application using Angular and UI-Router. The majority of my javascript files are being loaded on my index.html page, and those all work perfectly throughout the application. Issue: I have a state that requires javascript code to run when the state is called. (When...

In the transclude function of a directive link function, how is “futureParentElement” used?

angularjs,angularjs-directive,transclusion,angularjs-ng-transclude
In the angular documentation for the compile service (starting at line 412) there is a description of the transclude function that is passed into the linking function of a directive. The relevant part reads: function([scope], cloneLinkingFn, futureParentElement) In which (line 212): futureParentElement: defines the parent to which the cloneLinkingFn will...

AngularJS Directive how to show/hide custom(appended) element on a condition

javascript,jquery,angularjs,angularjs-directive
I' working on angular directive, to show error msg on exceeding character count on textarea. with following code, I can show error(div) MSG by appending on element, but I cannot hide it after showing it for first time, what I need to do in else block to remove the "elCharLimitError"....

JQuery functions not working with ng-repeat

jquery,html,angularjs,angularjs-directive,angularjs-ng-repeat
I am using ng-repeat to repeat some divs which show list of the records. Issue : I want to do is that when user is clicked on the record popup should be open. ng-repeat is working perfectly but the issue is this that JQuery click event is not working for...

why collection repect not show alternate color in angular js

angularjs,angularjs-directive,angularjs-ng-repeat,ionic-framework,ionic
I am using ionic framework .I make a simple demo of table using ng-repeat In this I make alternate color of each row which is running perfectly here is perfect code in which I used ng-repeat I used I ng-repeat <ion-scroll scrollbar-y="true" delegate-handle="i" ng-style="viewHeight"> <div class="row" ng-repeat="column in inv |...

Can onbeforeunload event be watch by $watch in angular js?

javascript,angularjs,angularjs-directive,angularjs-scope
I am a newbie of angularjs and now I am stack on catching event of onbeforeunload event. I would like to show to some response to user when they leave the page. And I would like to watch onbeforeunload event by $watch and execute my message display function. But how...

Build dynamic rectangle with Angular directive

javascript,angularjs,d3.js,angularjs-directive
Recently I have written a project with D3, so I need a dynamic rectangle. I used Angular to create a dynamic visualization.I have two input type rang, the first one will change the 'width' of rectangle and the second will change the 'height'.However I don't know how to use angular...

AngularJS outputting Javascript in a directive

javascript,angularjs,angularjs-directive,morris.js
Hi good people of stack overflow.. I am trying to make a directive in angular that outputs javascript that I'll use to draw a morris chart. So far I've been having a tough time. Here's the code: area-chart.js: angular.module('areaChart', ['ui.bootstrap']).directive('areaChart', function() { var directive = {}; directive.templateUrl = directivePath +...

Angular JS Filter Group Select Filter

javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
I have a users object similar to the one below: $scope.users = [ { name : 'John Doe', attached_groups = [ {1:object}, {2:object} ] }, { name : 'Bob Doe', attached_groups = [ {3:object}, {4:object} ] } ]; In my HTML I have the following group select. <select id="group_filter"> <option...

Angular understanding the link function

javascript,angularjs,angularjs-directive
i am trying to find out when and how to use the link function in angular directives. Say i have the following directive: app.directive("lbArticle", function() { return { restrict : "E", templateUrl: 'tpl/directives/information/article.html', scope: { article: '=' }, link: function(scope,element, attr){ scope.info = attr.article; } }; }); Now passing an...

Is this a “Deferred Antipattern”?

angularjs,angularjs-directive,angularjs-service,angular-promise
I'm finding it hard to understand the "deferred antipattern". I think I understand it in principal but I haven't seen a super simple example of what a service, with a differed promise and one with antipattern, so I figured I'd try and make my own but seeing as how I'm...

Angular Input percentage and currency mask

javascript,jquery,angularjs,angularjs-directive
I'm using angular, I was looking hard, but I can't find a good input mask. I'll have two kind of inputs, what I want is that when I type a number, in currency inputs I need a directive or something that when I type a number the sign '$' appear...

AngularJS: Cannot get my directive working

angularjs,angularjs-directive
I'm in my second day of learning AngularJS and have a simple example of how to change DOM on user's action, which somehow does not work for me. Here is an examlple: html file: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../Scripts/angular.min.js"></script> <script src="../Scripts/Controllers/app.js"></script> <script src="../Scripts/jquery-1.4.1.min.js"></script> </head> <body ng-app="myApp"> <my-widget> <p>Hello...

Bind scope to Directive's Controller

javascript,angularjs,angularjs-directive
Please consider the following angular directive: angular.module('map').directive('mapOptions', function MapOptionsDirective() { return { restrict: 'E', transclude: true, scope: { map: '=', layers: '=', mapId: '@' }, controller: mapOptionsController, controllerAs: 'mapOptionsCtrl', bindToController: true, templateUrl: 'modules/map/views/mapoptions.client.view.html' }; /////////////////////////// function mapOptionsController($scope) { var vm = this; console.log(vm); // log #1 console.log($scope.map) // log #2...

AngularJS custom directive not updating model with chosen file

javascript,html,angularjs,angularjs-directive
I've written my first custom directive, ng-file-chosen that should assign the file name that has been selected in an <input> element to the binding passed in through ng-model. In the following snippet, the ng-file-chosen result is bound to model.file and there is a binding below to show the chosen value....

Angularjs+Typescript directive implementing $compile

angularjs,angularjs-directive,typescript
I am having issues injecting $compile in the following directive. export class Element { public link(scope:dirScopeInterface, element:any, attrs:ng.IAttributes, formCtrl:ng.IFormController) { var attr = this.arrayJoiner(scope.standard, scope.attrs || {}, scope.ignore || {}); element.html(this.compiler(attr)); $compile(element.contents())(scope); } } At the moment it is throwing an $compile is undefined error. I have tried using static...

AngularJS template vs templateURL in directive

javascript,angularjs,angularjs-directive
I have a directive defined like this: app.directive('itemComments', ['ajax', function(ajax) { return { restrict: 'A', templateUrl: URL + 'public/Pages/Homepage/ajax/getCommentsTpl', controller: 'ItemLibraryController', controllerAs: 'itemLibraryCtrl', link: function(scope, element, attr) { var $element = $(element); scope.$watch(function(scope) { return $element.find('li').length > 0; }, function(finished) { if(finished) { autosize($element.find('textarea')); } }); } }; }]); The...

resulting HTML from $compile(custom-directive) doesn't bind {{values}}

angularjs,angularjs-directive,angularjs-scope,mapbox,angularjs-compile
I want to dynamically add Angular custom Directives, but the directive resulting from $compile(directive) doesn't have the 2-ways binding. Here's my simplified problem: I am using MapBox, and I want to use Directives for the the markers' popup to show, for example, the markers' title. MapBox wants HTML as a...

How to create dynamically $scope variable and function in angular JS

angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
I trying to creating dynamically $scope variable and function and call to ng-click directive. My scenario is call dynamically function in ng-repeat & ng-click. Json { "listnames": [ { name: rock, age: 24, year: 1999}, { name: rock1, age: 24, year: 1999}, { name: rock2, age: 24, year: 1999}, {...

how to show only 25 element at one time?

angularjs,angularjs-directive,angularjs-scope,ionic-framework,ionic
I am trying make table view in ionic using angular js .but I have lot of data to show around 5000 object .So after getting data my UI hang because it is printing the data on dom.So I want to implement lazy loading so that only 100 element is visible...

Jquery Time Picker inside ng-repeat is not working

jquery,angularjs,angularjs-directive,angularjs-ng-repeat,datetimepicker
As i am proceeding into my project. In Some place i need to repeat few input fields which contains two time html5 field. Everything was going well when i was testing in Chrome but when i tested in in firefox it is showing as text field. (Firefox does not support...

Reply Textarea for particular post(using textarea), opening for all the comments

angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,ng-repeat
Hi I am trying to implement facebook kind of post and reply comments using angularjs. Below is my code <doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script...

Detecting non-assignable values in angular directives

angularjs,angularjs-directive
I have a directive that will get/set focus on an element depending on a value. When the element is focused or blurred the directive will update the boolean value. However, sometimes I only want to set the focus when a condition is met and I use a non-assignable value, which...

Angularjs $watchCollection on $rootScope not triggered when values updated from directive

javascript,angularjs,events,angularjs-directive,angularjs-watch
I'm running into a bit of an issue solving a problem with some Angularjs functionality I'm working on. The basic idea is that I have a system where certain criteria must be met before the user is allowed to advance to the next section of the app. One example of...

How to apply ng-class using String syntax and array syntax?

angularjs,angularjs-directive,ng-class
I am a beginner in angularjs and I read in the doc of angularjs that ng-class can be applied as string and array syntax. so I was trying to apply the ng-class for the below code (1) Using String Syntax <p ng-class="style">Using String Syntax</p> <input type="text" ng-model="style" placeholder="Type here"> (2)...

AngularJS proper events biding with parent and child directives

javascript,angularjs,events,angularjs-directive,event-propagation
I'm trying to implement popup window and button which reveals it. I'm doing that by the means of directives: <div class="wrapper" wrapper> <div class="popup" ng-class="{'popup__active':isActive}"> Popup message </div> <button btn>Click me</button> </div> When popup is visible I need to be able to close it by clicking anywhere outside of the...

The href doesn't refresh when the ui-sref changes

javascript,angularjs,angularjs-directive,angularjs-ui-router,interpolation-directive
I have an issue with angular. I have this code in my template : <select class="form-control" ng-model="hiveReports.reportSelected" ng-options="link for link in hiveReports.reportsLink" ui-sref="dashboard.hive-reports.{{hiveReports.reportSelected}}"> </select> and the code behind like this : .config(['$stateProvider', function ($stateProvider) { $stateProvider .state('dashboard.hive-reports', { url: '/hive-reports', template: require('./hiveReports.tmpl.html'), abstract: true, controller: 'HiveReportsCtrl as hiveReports' }); }])...

how to show alert when user scroll to top of div in angular js?

angularjs,angularjs-directive,angularjs-scope,ionic-framework,ionic
hello could you please how to show alert when scroll to top of div in angular js and same in when user scroll to bottom .Actually I know How to achieve this in jquery using if(this.scrollTop===0).But I am using ionic framework with angular js .So could could you please tell...

pass callback to directive - angularjs

angularjs,angularjs-directive
I try to add an animation to an element via a directive. When the animation is done I want it to call the passed callback function. I try to do achieve it this way (SO - How to add validation attributes in an angularjs directive) The 'addAnimation' directive: angular.module('myModule') .directive('addAnimation',...

Angular Directive scope undefined

angularjs,angularjs-directive,angularjs-scope
I'm using a directive to parse a xls file and pass the data to a button via scope. The problem is that within the link function I'm binding to the element change event and calling a function that parses the xls file, but scope is undefined within the handleFile function,...

Passing data to newly created directive in angularjs when ajax call is over

ajax,angularjs,angularjs-directive,angularjs-scope,slickgrid
I am trying to create custom directive out of slick grid. This is what I have done so far. angular.module('app') .directive('myGrid',function () { return { restrict: 'E', link: function (scope, el, attrs) { var data = []; var columns = [ {id: "title", name: "Title", field: "title", width: 160, cssClass:...

loading ng-grid with ng-click

angularjs,html5,angularjs-directive,ng-grid
I am trying to load an ng-grid when a button is clicked but it is not working. But it works well on load. Why? HTML: <a href="" ng-click="loadGrid()">Load Grid</a> <div ng-grid="ngOptions"></div> $scope.ngData = [ { Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' }, { Name: "Teancum",...

Access parent property from directive controller with ControllerAs syntax and no $scope injection

angularjs,angularjs-directive,angularjs-scope
This is a followed up question from this. How can I access a property defined in MyController from MyDirectiveController to change its value or just read it and use it for something else? (commented line in the code). angular .module("app",[]) .controller('MyController', MyController) .controller('MyDirectiveController', MyController) .directive('myDirective', myDirective); function MyController() { var...

How to remove circle on background of checkbox?

angularjs,angularjs-directive,angularjs-scope,ionic-framework,ionic
I am trying to show a check-box in a popup screen. Actually my checkbox is rounded. I need no rounded background and tick should be green as show in image. I need checkbox will be placed on right side and having no background but have green color. Here is my...

Is it a good practice to write several times ng-cloak for several angular expression to avoid being shown on page load?

angularjs,angularjs-directive
<input type="text" ng-model="model1">{{model1}} On page load {{model1}} is visible. To avoid that I can make use of ng-cloak HTML <input type="text" ng-model="model1" ng-cloak>{{model1}} CSS [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } But it didnt seem to work for me. I can still see {{model1}} on page...

How to get value from ng-repeat when event not from element within ng-repeat (i.e. not ng-click)

javascript,angularjs,angularjs-directive,angularjs-ng-repeat,angular-filters
I have a lookahead fuzzy search directive for category tagging: <input type="text" class="form-control" placeholder="Apply Tags" ng-keydown="checkKeyDown($event)" ng-change="searchTags()" ng-model="searchText"> <div ng-show="searchText.length>0"> <ul> <li ng-repeat="tag in suggestedTags | fuzzySearch : searchText : 'OR' track by $index" ng-class="{active : $index === selectedIndex}"> {{tag}} </li> </ul> </div> This is how I'm handling things suggestedTags:...

scope.$observe is not a function in an AngularJS Directive

javascript,angularjs,angularjs-directive
Take the following directive: appDirectives.directive('drFadeHighlight', ['$animate', '$timeout', function ($animate, $timeout) { return { scope: { isWatchObject: '=' }, restrict: 'A', link: function (scope, element, attr) { element.addClass('dr-fade-highlight'); scope.$observe('isEnabled', function () { console.log('i observed...'); console.log(arguments); }); } } }]); I have stripped it right back, to show only the part I...

AngularJS, Animate on change: directive $watch not called

javascript,angularjs,angularjs-directive
I'm creating a live websocket application which requires grabbing the users attention upon change of a value. The following directive is used in multiple places on the same page: <span class="badge" animate-on-change animate-class="highlightWarning" animate-watch="totalAnswers">{{totalAnswers}}</span> and <div animate-on-change animate-class="colorWarning" animate-watch="rq.answer" ng-switch="question.type" ng-repeat="rq in recentResponse.answers" ng-if="rq.question == question.id"> Now, rq.answer rarely changes,...

AngularJS - binding/linking two directives together

javascript,angularjs,angularjs-directive
What is the preferred way to link/bind two directives together? I have a controller with two directives, first directive is a select element, after selecting option, second directive should process selected item value. App code: var app = angular.module('plunker', []); app.controller('MainCtrl', function() { var sharedData = { selectedId: '' };...

why ngrepeat not working properly not display data?

angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
I am making a simple demo of nested ng-repeat with some condition.it is not printing any values why ? Actually I am trying to get below result after iteration of two objects Expected result ght nor abc pqr code pen or plunker \ <ion-scroll scrollbar-y="true"> <div class="row rowclass" ng-repeat="column in...

How to show a hidden tag when clicked on an item

angularjs,angularjs-directive,angularjs-scope
HTML <li ng-class="{class : classVar==='Marketing' }" ng-click="changeClass('Marketing')"> <i class="fa fa-pencil" style="visibility:hidden;"></i> Marketing <i class="fa fa-times" title="Close" style="visibility:hidden;"></i> </li> <li ng-class="{class : classVar==='Sells' }" ng-click="changeClass('Sells')"> <i class="fa fa-pencil" style="visibility:hidden;"></i> Sells Team Nestle <i class="fa fa-times" title="Close" style="visibility:hidden;"></i> </li>...

How to access wrapped variables in a directive?

angularjs,angularjs-directive,angularjs-scope,angular-directive
I have an object which consists of multiple arrays: $scope.myArrays = { array1: ['Pizza', 'Spaghetti'], array2: ['Lasagne', 'Schnitzel'] }; Moreover, I have a custom directive to which I want to pass this object myArrays and bind those arrays to scope variables: <my-directive my-data="myArrays"></my-directive> myApp.directive('myDirective', function() { return { restrict: 'E',...

How can I unit test a controller in an AngularJS Directive?

javascript,angularjs,unit-testing,angularjs-directive,karma-jasmine
My directive is: window.map.directive('dosingFrequencies', [ function() { return { restrict: 'E', scope: true, templateUrl: '/views/directives/dosingFrequencies.html', controller: function($scope, util) { console.log('here we go!'); angular.extend($scope, { model: createModel(), addFrequency: function(med) { med.frequencies.push(createFreqModel()); }, removeFrequency: function(med, index) { med.frequencies.splice(index, 1); }, showTimeChecked: function(freq) { if (freq.showTime) { freq.prn = false; freq.quantity = '';...

angularjs custom directive conditional templateUrl via attribute

angularjs,angularjs-directive
I am trying to load conditional template urls via attributes, my directives is as follows. The directive is in a ng-repeate and when box.key == 'experiences' the expression is returning education-form.php and not experiences-form.php. <div multiple-form directive-data='directiveData' template-url="box.key == 'experiences'? 'experiences-form.php':'education-form.php'" item="item" forms="forms" form-name="{{box.key}}{{item._id}}" onsave="updateMultipleUser(box.key, item._id, $data)" onreset="formAction($formName, 'reset')"...

How to shift parent
diagonally in AngularJS custom directive

html,css,angularjs,angularjs-directive,directive
The following code sample works correctly: the colors of the dynamically generated ellipse elements iterate through the colors in an array. As a variation, I'm trying to dynamically update the style property of the parent div element in a custom directive so that the div elements are essentially shifted downward...

Limiting $scope in AngularJS

javascript,angularjs,angularjs-directive,angularjs-scope
I have a multi-page AngularJS web application that serves as an analytics dashboard. I am currently using $scope to create variables so I can display some of the data dynamically on the HTML pages. Instead of creating $scope variables that will be global no matter what page a user is...

How to get column footer data in Angular UI-Grid?

javascript,angularjs,angularjs-directive,angularjs-scope,angular-ui-grid
For example, in this tutorial, if there is any way to get the data in the column footer? I'd like to present the total numbers in somewhere else. Thanks in advance....

angularjs directive to change the format of name

javascript,angularjs,angularjs-directive
I did not quite understand how to write AngularJS directives even after looking at many blogs. Basically I have an array of names in the format "lastname, firstname". I want to write a directive to make it "firstname lastname" My html is like this <div ng-repeat="names in nameArray" <custom-name-format> {{names}}...

Accessing parent Controllers scope within a directive that uses ControllerAs and scope:true

angularjs,angularjs-directive,angularjs-scope
I'm trying to use ControllerAs in a directive with no $scope injection, using this instead, and I'm struggling when scope:true When I use an isolated scope everything works fine because I can use bindToController: true, but in this case I'm missing something and I don´t know what. I have this...

ng-switch is not working as expected

angularjs,angularjs-directive,angularjs-scope,ng-switch
Maybe the use of the 2-ways binding and $watch is still not very clear to me.. but I was expecting that this piece of code should work! I have a topNavbar directive in my index.html page. The topNavbar should show the loginButton if the user is not logged, otherwise a...

How to make sibling directives communication work( communication between certain specific directive)

angularjs,angularjs-directive
All: Suppose I have two directives( dir1 and dir2) , which are both isolated scope. From some posts, I learnt that I need to use "require" to get scope of the other directive, but there is one question confused me so much: Suppose I use ng-repeat generated a lot of...

inject $http into directive controller

angularjs,angularjs-directive
i am trying to inject $http into directive controller like the following : JS app.direcitve('customDirecitve',function(){ return : 'E', scope : { url : "@", urlParams : "@" } , controller : ['$scope', '$http', function($scope, $element, $attrs, $transclude,$http) { $http.post($scope.url,$scope.urlParams).success(function (data) { }); ]}; }); what is wrong with this injection...

How to pass the result of a function call to a directive?

angularjs,angularjs-directive
I declared a function on my scope that return an object. I try to pass the result of this function to a custom directive, but it triggers an infinite digest loop (open your console and run the snippet). It seems that the objectEquality flag is not set on the watcher...

Angular directive which isn't present in the DOM

angularjs,angularjs-directive
I would like to have a directive that I can use for grouping ng-if or ng-switch-when like: <empty ng-switch-when="expression"> ... Lots of little DOM nodes ... </empty> If I just do .directive('empty', function() { return { restrict: 'E', }; }) then it works, but still has an <empty> in the...

Get Angular to action ng-if in new elements generated by d3.js

javascript,angularjs,svg,d3.js,angularjs-directive
I am generating a series of <circle ng-if='n'> someScopeFunction()' \> with d3.js How can I get Angular to notice and work on these new elements and ng-ifs? And how can I get it to do so with angular variables, e.g. <circle some-attr='{{i - 2}}' />...

Angular :: Making Input Text to open up dropdown list upon focus

javascript,angularjs,angularjs-directive
How can i make <input type="text"> to show drop down probably like it happens in auto complete extenders but without typing i mean as soon as i focus on text input box it should show a list like dropdown. In Simple word I want to show <select></select> which look like...

Inject dependency to the angularjs directive using typescript

angularjs,angularjs-directive,typescript
Lets say I have a simple angular directive that looks like this: app.directive('setFocus', ['$timeout', function($timeout) { return { restrict: 'AC', link: function(_scope, _element) { $timeout(function() { _element[0].focus(); }, 0); } }; }]); How can I write this using Typescript and get the $timeout accesible within the link function? My example...

Detect if directive was removed from DOM

javascript,angularjs,dom,angularjs-directive
I have an AngularJS directive and I need to perform certain actions if the directive's element is removed from the DOM (either from inside an AngularJS call or by any other method, like jQuery). Is that possible?...

What should be the correct path of templateUrl in angularJs directive?

javascript,angularjs,angularjs-directive
I want to give path of templateUrl as a seprate .jade file. But its showing 500 err and Error: [$compile:tpload] . Below is the code in my directive app.directive('personRecord',['$http',function(http){ return{ restrict : 'AE', templateUrl : '../../views/template.jade', link : function(scope,ele,attr){ } } }]); and my folder structure is like below. bin...

KendoUI Popover $compile issue

angularjs,angularjs-directive,kendo-ui,angularjs-compile,kendo-tooltip
I have directive which is a wrapper around KendoUI kendo-tooltip and I'm instantiating it like this: <div my-directive-popover="options"> </div> Inside my code I replace my-directive-popover with kendo-tooltip like this: $element.attr( 'kendo-tooltip', popoverName ); At the end of pre compile function I have to of course compile this so it's recognized...

angularjs $parse string to a “controller as” method

javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
How do I parse foo.callbacke to point to timerController.callbacke method? <div ng-app="timerApp" ng-controller="timerController as foo"> <div ng-repeat="item in [1,2,3,4]"> <div watcher="{'seconds': 'foo.callbacke'}"> {{seconds}} </div> </div> If you prefer: http://jsfiddle.net/e86e05a1/ (open console)...

Improve slow angular directive

javascript,angularjs,angularjs-directive
I have a page that renders table view or div/blocks view depending on window width. But the swop between views happens very slow. Maybe I am not doing things in the best way? I basically have 2 scope variables(block and table, set to true or false) defined in the controller....

Angular Multiple ngIncludes with Transclusion on Page Losing Scope(?)

javascript,angularjs,angularjs-directive,requirejs,angularjs-ng-include
I am trying to build a modular ngInclude. By this, I mean that the ngIncluded JSP will pull in all the dependencies it needs and recompile itself before rendering. This same file is used multiple times on a single page. The main page has several tabs - all of which...