FAQ Database Discussion Community


Directive Doesn't Update Angular

angularjs,angular-directive
Js: myApp.directive('locationClass', function ($location) { return { restrict : 'A', link: function (scope, element) { var currentLocation = $location.path(); var formatCurrentLocation = currentLocation.replace(/\//g, " "); //console.log(currentLocation); element.addClass(formatCurrentLocation); } } }); Html <html ng-app="myApp" ng-controller="headerCtrl as header" location-class> it works corrrectly , but when pages load, it updated , when i...

scope.$watch not working in angular directive

javascript,angularjs,angularjs-ng-repeat,watch,angular-directive
I have made a custom directive and used ng-model, but when the model updates, the directive not even though i'm watching the event. Here's the code: angular.module('Directives').directive("customDirective", ['$window', function ($window) { return { restrict: "E", require: 'ngModel', scope: { ngModel: '=', }, link: function (scope, elem, attrs, ngModel) { //...

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',...

(Why) does having a directive that “calls itself” in a finite ng-repeat lead to a stack overflow from infinite recursion?

javascript,angularjs,recursion,angular-directive
EDIT: See this plunker for a simplified version of the problem (an sscce). The following code seems to cause an infinite recursion problem: statement.directive.html <textarea></textarea><br /> <button ng-click='statement.newStatement()'>New Statement</button> <button ng-click='statement.newSubstatement()'>New Substatement</button> <hr /> <statement ng-repeat='statement in statement.curr.sections' curr='statement' parent='statement.curr'> </statement> I don't know why though....

AngularJS directive within ng-if won't run

javascript,angularjs,compilation,angular-directive,angular-ng-if
I have a custom directive myDirective that performs a task on an element. I have this directive in an ng-if block <div ng-if="condition"> <div my-directive></div> </div> Something like this fiddle: http://jsfiddle.net/hGnvv/ only the ng-if condition turns to true after my $http requests are loaded. The directive is probably compiled during...

AngularJs. Flexible directive

angularjs,angularjs-directive,angular-directive
I'm developing a simple HTML editor. The main idea is to have "default theme for a layout" and components can override theme's values. To manage theme's and component's styles I've created simple isolated directive which accept object and index. The main problem is, when the component do not has a...

Unit testing angularjs directives's event broadcast

angularjs,unit-testing,karma-jasmine,angular-directive,angular-broadcast
I never had to test my angularjs directives before, also the directives I wrote for my current company is uses events to communicated directives to directives and services. And so I wrote a directive, e.g. a search directive. <m-search /> This directive broadcasts "searchbox-valuechanged" event and the key, now I...

AngularJS: Using a custom javascript function defined elsewhere in controller/directive

javascript,angularjs,d3.js,angular-directive
So, I have javascript file (kind of a library, still working on it) 'linechart.js' which holds an object which in turn contains a function that takes some data as input and generates a line chart using D3. Here's the code: linechart.js var lineobj = { plotFunc : function(data) { //generate...

Angular textarea directive: numbers allowed, no comas, dots allowed?

javascript,angularjs,angular-directive
I have a textarea which holds multiple values stored in ng-model as an array. On press of enter and insertion of a new valid character(numbers and dots) a new value is created within the array. I am trying to adapt a custom directive I found in an answer. But I...

AngularJS - call listener of directive on click and pass data to it

javascript,angularjs,angular-directive
So, I was working with directives in AngularJS. What I want to achieve is that call the listener of the directive on the click of a button and pass it some data from the controller. Here's my directive (example) app.directive('graphVisualization', function() { var containerid = document.getElementById('left-graph-container'); return { restrict: 'A',...

view is not getting refreshed with updated model

angularjs,validation,angularjs-directive,angular-directive,angular-digest
My angular view is not getting updated when model changes. Model is getting changed in "onblur" event in directive. inputNgEl.bind('blur', function () { }) My model is being passed to a directive and directive is displaying the content of the model. Please find the plunk below. http://plnkr.co/edit/Ku5yOyWsa1fjnLIs2Eu3?p=preview Can you please...

Writing an Angular directive with a TypeScript class

javascript,angularjs,typescript,angular-directive
I may just be attempting to combine too many "new-to-me" concepts at once, but I am trying to write a custom Angular directive using a TypeScript class. At the moment, I'm not trying to do anything terribly useful, just a POC. I have a TypeScript file that looks like this:...

Remove all ng-model variables from $scope when hidden

angularjs,angular-directive
My problem is similar to the one in this question, This works when we know the scope variable to remove. However I am looking for something generic, like remove the variable for all the elements this directive is attached to, whenever they become hidden. I tried injecting the ngModel and...

Date-Time-Range directive field is not showing any values

javascript,angularjs,twitter-bootstrap,datetimepicker,angular-directive
I have created an Date Time Range Directive in AngularJS. I am using dangrossman/bootstrap-daterangepicker plugin for getting the Date Time Range Calendar. The directive is working fine as well as the model value is getting changed but the view is not updating. element.data('daterangepicker').setStartDate(val.start); element.data('daterangepicker').setEndDate(val.end); Can anyone please tell me some...

ng-class not working on a custom directive with templateURL

javascript,angularjs,angularjs-scope,angular-directive,ng-class
I have a directive that calls a template. Within the template i am using ng-class which adds a class on click. However, on click, this class is not getting added. Directive: app.directive('myDirective', function () { return { restrict: 'E', scope: { data: "=" }, templateUrl: 'home/user.html' } } ); home/user.html...

Binding functions through nested directives with isolated scope failing in Angular 1.4

angularjs,angular-directive
The 1.4 update seems to have introduced an issue when binding functions in nested directives. I have an example plunker: http://plnkr.co/edit/fQLY0N8BTNs38VC8ikll Code: var app = angular.module('myApp', []); app.controller('myCtrl', function(){ this.searchFunction = function(term) { console.log('you searched for ' + term); } }); app.directive('outerDirective', function(){ return { restrict: 'E', scope: { outer:...

Active class being added to the HTML but not its properties

jquery,css,angularjs,angular-directive
I've got a navigation menu which I want to add an active class to once it's clicked. It works great apart from the fact that the element doesn't receive the properties in the active class, it just gets added to the HTML as a class. I've also tried using $compile...

JQuery not detecting DOM elements inside angular directive

javascript,jquery,html,angularjs,angular-directive
I have an angular directive with a linked template which has a simple code block <div> <h1 class="dfaded">Hello World</h1> </div> Now at the end of my index.html file I am putting a Javascript Function <script> $(document).ready(function () { $('.dfaded').addClass("ahidden").viewportChecker({ classToAdd: 'avisible animated fadeIn', offset: 100 }); }); </script> But this...

Directive's link is not rendering variable in the scope

angularjs,angularjs-scope,angular-directive
I'm expecting the directive to print the template with the values inside {{ }} resolved, but it's not. It's printing out {{argVal}} as if it's a literal piece of HTML string. myApp.directive('myArgs', [function() { var theTemplate = '<span>{</span>' + '<div ng-if="typeIsArray(argVal)">'+ '<p>{{argVal}}</p>' '<my-args arg-val="argVal[0]"></my-args>' '</div>'; return { restrict: "E", scope:...

Controller to Directive and Directive to controller correct way of communcation

jquery,angularjs,angularjs-scope,angular-directive
I have a page, which contains the pageNavigator with page display content. according to the user click on the appropriate buttons(links) I am updating the page. I made the directive for :page navigator as 'docNavigation' and included with my home html. Now i requre, When page loads, my doc page...

Angular Datatable - Filtering or sorting with “Angular Way” deleting rows

angularjs,web,datatables,angular-directive
I reduced my code to the smallest version with the error. The point is, I create a table, the angular way, with an empty array for the Table rows. After that, I fetch some data, and add it to that same array (with angular.copy) Even though they are correctly added...

How I can delegate a click event in angular?

angularjs,delegates,angularjs-ng-click,angular-directive
How can delegate a click event on my board, what I do is I tell element to find element with the class open-preview And I can not do it like I do. Because the li is created dynamically in ruby loop. I do not know how I can delegate a...

Using ng-repeat with directives to create a table that adapts to data

javascript,arrays,angularjs,angularjs-ng-repeat,angular-directive
I have a table that uses ng-repeat to iterate through an array of objects. All the objects in the array have the same keys. I want to make it so that an arbitrary set of keys could used, so long as the keys were consistent within that array. It seems...

Creating a directive for bootstrap menuItems

javascript,angularjs,twitter-bootstrap,angularjs-scope,angular-directive
I have built a directive for some of the boilerplate in the bootstrap navbar with ng-transclude for the navbar-collapse.I also find that there are two types of li elements for the navbar-nav items depending on whether the menu item is a dropdown or not.I find that this dropdown is however,not...

how to send an object to angular directive on a check-box

javascript,angularjs,angular-directive,icheck
i am trying to consume iCheck check box using a directive. my directive is setup like this. .module('app').directive('bootstrapCheck', ['$timeout', '$parse', function ($timeout, $parse) { return { compile: function (element, $attrs) { var icheckOptions = { checkboxClass: 'icheckbox_minimal', radioClass: 'iradio_minimal' }; var modelAccessor = $parse($attrs['ngModel']); return function ($scope, element, $attrs, controller)...

Changing the model of a select element in Angular adds an option with value=“?”

angularjs,angular-directive
I have a select element in my angular app tied to a model. When I change the model angular, for some reason, adds an extra option with value="?". Here is a jsFiddle to illustrate my point. Why is this happening and how can it be avoided? angular.module('angularApp', []); function testCtrl($scope,...

How can I listen an element's attribute change in an Angular directive?

javascript,angularjs,angularjs-directive,angular-directive
here's a plunker, it pretty well exposes what I'm trying to do. I have a directive with ! isolated scope ! with an attribute that is intended to be changed <div ng-init="environment='natural'"> <input ng-model=environment> <chameleon env="{{ environment }}"></chameleon> </div> I want my directive to response to global scope's changes :...

Remove img-element from Angular page

javascript,jquery,angularjs,element,angular-directive
I'm creating an angular web app in which I want to show an image at first, but when you click on a button, I want to remove this default image and replace it with a videostream of the webcam. But so far, removing the image - element remains hard... angular.module('qrWebapp').directive('qrScanner',...

Why isn't list of elements showing up?

javascript,angularjs,angularjs-directive,angularjs-ng-repeat,angular-directive
I am working on an AngularJS tutorial This tutorial covers the ng-repeat directive, an AngularJS directive used repeating data. To show an example of ng-repeat, The author enters periodic table elements in a JSON format, covering element's name, element #, etc into controller logic($scope) To display the elements(code below), the...

Angular: How can I apply directive that've been introduced later then layout?

angularjs,angular-directive
Suddenly I've realized that I have no working plan (though I've tried a lot of things before asking this question here) for solving following problem. Say, we have following simple angular application (jsfiddle #1): <div ng-app="debug"> <ping/> <ping/> <ping/> </div> and var app = angular.module('debug', []); app.directive('ping', function() { return...

How do I pass a function to an angular directive inside ng-repeat (arg is undefined)?

angularjs,angular-directive
parent directive: <autosuggest click-match="addTag(tag)"> </autosuggest> The addTag function is defined in the parent controller. It gets called, but the argument is undefined. Here is the <autosuggest> implementation: scope: { clickMatch: '&' } And inside the view: <li ng-repeat="match in matches"> <span ng-click="clickMatch(match)">{{match.name}}</span> </li> The clickMatch function is calling the parent's...

Accessing scope variable in directive

angularjs,angular-directive
At the moment I have this directive that checks if the username entered by the user already exists in the database - app.directive('usernameAvailable', function ($timeout, $q, userService, authService) { return { restrict: 'AE', require: 'ngModel', link: function (scope, elm, attr, model) { model.$asyncValidators.Username = function () { var User =...

Change a directive template using ng-click

javascript,angularjs,angular-directive
I have a few buttons with ng-click in a controller and I want to change the a directive template when I click on a button. What is the best way to achieve this? (I will later use a slide in effect of the element)

angularJS directive for href behavior

angularjs,angular-directive
I am trying to get a href behavior added to tag. How can this be done? Is there way in angular directives to add same behavior to other html tags. I have added <div click-element="#/page1/test?Tab=1/"> but i get the following lexer error for passing the URL as parameter: "stack": "Error:...

How to bring data from parent directive to child directive in angular

angularjs,angular-directive
I have 2 directives as "chart" and "datapoint". Here the chart directive is the parent of the datapoint directive. I am trying to bring some data from parent directive to the children, but it throws an error. Here is my directives: "user strict"; angular.module("chartDirective", []) .directive('chart', function () { return...

get directive attribute defined in HTML in directive controller

angularjs,angular-directive
I am creating a custom controller where I want to get directive attributes in controllers . Here what I have done so far but I am not able to get the attribute value . HTML Code : <my-text name="tester"></my-text> Angular code : app.directive('MyText', function() { var controller = ['$scope', function...

Kendo dropdown with ng-options instead of DataSource

javascript,angularjs,kendo-ui,html-select,angular-directive
I've got a dropdown list defined using angular like this: <select class="form-control" ng-model="controller.selectedUser.superiorId" ng-options="superior.userId as superior.lastName + ' ' + superior.firstName for superior in controller.superiors | orderBy:['lastName', 'firstName']"></select> This works fine, however I want to show a little image next to the entries and so I'm trying to convert this...

Contenteditable with ng-model

angularjs,contenteditable,angular-directive
I am using a contenteditable directive (code out of this discussion: https://github.com/angular/angular.js/issues/528) to allow my model to be updated. I want to update on the backend as well though (I'm using ngResource). My template is loops through person in people and for each person: <span contenteditable ng-model="person.name" ng-blur="updatePersonName(person)">{{person.name}}</span> I would...

Confirm directive in AngularJS doesn't work

angularjs,angular-directive,sweetalert
I end up with this code: MetronicApp.directive('confirmClick', ['SweetAlert', function(SweetAlert) { return { priority: 100, restrict: 'A', scope: { confirmClick: '&' }, link: { pre: function(scope, element, attr) { var msg = attr.ngConfirmClick || "Are you sure?"; var clickAction = attr.confirmedClick; element.bind('click touchstart', function(event) { SweetAlert.swal({ title: "Are you sure?", text:...

Directive displaying Error: [$parse:lexerr] after moving template to templateURL

angularjs,angularjs-scope,angularjs-ng-repeat,ng-repeat,angular-directive
I have a directive working without any issues when the HTML markup is written in the template section of the directive. I've just moved the HTML markup in a .html file and on load of the page, i am seeing: Error: [$parse:lexerr] http://errors.angularjs.org/1.3.14/$parse/lexerr?p0=Unexpected%20next%20character%20&p1=s%2016-16%20%5B%5C%5D&p2=option.name%20%3D%3D%3D%20%5C'choices%5C' Original directive: app.directive('myDirective', function () { return...

How to call my own function inside an Angular Directive?

javascript,angularjs,angular-directive
I'd like to call "myFunc()" inside my angular directive, how might I do this? myApp.directive("test", function () { return { restrict: 'A', template: "<div class='box'></div>", myFunc: function() { console.log('myFunc'); }, link: function ($scope, element, attrs) { element.bind('click', function () { myFunc(); //<------------- doesn't work }); } } // of return...

How do you pass in data to custom directives as a value of the attribute itself?

angularjs,angular-directive
I have a directive defined as such: angular.module("main.directives").directive("todo", function() { return { restrict: "A", scope: { todo: "=entity" }, replace: false, templateUrl: "todo.html", link: function(scope, element, attributes) { } }; }); which I use like this from templates: <div todo entity="todoData"></div> todoData comes from a controller or some other the...

AngularJS directive, Call service by directive attribute

angularjs,angular-directive
I'm trying to create an angular directive for calling service method to check changing database. Here is my HTML: <div my-directive="Panel.check"></div> What I'm want: Call "check" method of "Panel" service. Directive don't know anything about services and its method. It just parses attributes and binds them, Or if must be...

Manipulate template after compilation

javascript,angularjs,templates,angular-directive
I have a simple template that uses ng-repeat: template.html <div id='tmpl'> <ul> <li ng-repeat="item in items">{{ item.desc }}</li> </ul> </div> Inside my directive, I am compiling that template with a custom scope. and then that template is added to the page: var element = $('#my-div'); var compiledTemplate = $compile(scope.template)(customScope); element.before(compiledTemplate);...

Monitor changes with a directive

javascript,angularjs,angular-directive
I have a form where I am using ng-repeat in a few places to output some data from different arrays. Also there is a 'Add item' button that is supposed to add an item to the array. Something like this: -----------FORM-------------- | [add button] | | | | ------------------ |...

AngularJS use a directive inside a ng-repeat

angularjs,angular-directive
I have a directive which I am unable to use inside an ng-repeat block. Here is my directive: ap.directive('pastDate', function() { return { require: 'ngModel', link: function (scope, element, attrs, ctrl) { ctrl.$validators.pastDate = function(modelValue) { // 'pastDate' is the name of your custom validator ... var today = new...