FAQ Database Discussion Community


Angular directive not watching

javascript,angularjs,directive
I'm using a directive in AngularJS, and I'm trying to check if my field is $dirty, if that's true i want to log a message and when it changes i want to show another message (That sentence will be replaced later for something more complex). I want to reuse in...

dynamically add ui-sref to an element

angularjs,directive
I have the following directive .directive('famAction', function () { var directive = { restrict: 'A', scope: {action: '='}, link: link }; function link(scope, element) { if (scope.action.hasOwnProperty('state')) { element.attr('ui-sref', scope.action.state); } if (scope.action.hasOwnProperty('func')) { element.bind('click', scope.action.func); } } return directive; }) The problem is that, when adding the ui-sref attribute,...

AngularJS $scope not accesible in template

javascript,angularjs,templates,scope,directive
As the title summaries pretty well, I've got a template where it seems impossible to access my $scope. To write some more information. The template is rendered into a directive from another template like this: <site-overview class="site-overview float_left" ng-repeat="site in currentEngine.data.sites" site='site' provider='currentEngine' style="background-color: {{currentEngine.data.skin.skin_color_2}}"> </site-overview> These 'site-overview' templates are...

Apply CSS to AngularJS Directive Element Tag

html,css,angularjs,directive
Can I apply a CSS style to an AngularJS directive that has been defined as an element tag? I have the following simple directive: app.directive('popupHelp', function ($window) { return { restrict: 'A', link: function (scope, elem, attrs, ctrl) { elem.bind('click', function (e) { $window.open('http://www.google.com', 'popupHelpWindow', 'width=500,height=500'); console.log("I'm going to get...

AngularJs animate background color / colour

javascript,angularjs,colors,jquery-animate,directive
I have been trying to Dynamically Animate a background between 2 colours on click using AngularJs Directives and Controllers (with no success so far). Does anyone know how to do this? I have been trying to store the currCol (stored as an array var pushed into ng-class), but then I...

AngularJS - Apply directive instantly, formating currency

javascript,angularjs,input,filter,directive
Ok so I have the following directive on various input elements. Some of those elements are on modals so The current method doesn't really work how I want, it should apply it right before the modal opens. crtPromoDir.directive('ngFormatCurr', ['$filter', function($filter) { function link(scope, element, attrs) { element.blur(function() { element.val($filter('currency')((element.val() ||...

AngularJS: Hide element on scroll with $animate

javascript,angularjs,animation,directive
I have the following directive: angular.module('mymod').directive("hideOnScroll", function($animate, $document) { return function(scope, element, attrs) { $document.bind('scroll', function () { if ($document.scrollTop() > 80) { console.log("this is fired1") $animate.addClass(element, "fade"); } else { console.log("this is fired2") $animate.removeClass(element, "fade"); } }); }; }); I have both "this is fired" messages in the log...

Compile external HTML which is called by ajax in directive

angularjs,compilation,directive
How to compile external HTML file ? I am loading a external HTML file via ajax based on the browser request in directive so is there any way to compile that file so that it can be used in directive? corpo.directive('corpInbox', function(companyFactory, $templateRequest, $compile) { var directive = {}; directive.restrict...

angular directive to make input respond on enter

javascript,angularjs,angularjs-directive,directive
i apologize if the question is vague, i'm not quite sure how else to explain what i need. There are some dirty options which come to mind, but i'm a novice angular coder and i feel there is a clean simple method to implement this with directives maybe? what i...

AngularJS: Adding ng-click within element.append

angularjs,directive
Within my directive I have the following code, which will be used to continually append to an html element. //Establishes the type of question and therefore what should be displayed app.directive('questionType', function ($http, $compile) { return { restrict: 'A', link: function (scope, element, attr, model) { switch (scope.Question.inputType) { case...

AngularJS - directive with a dynamic array of objects in form

angularjs,directive,ng-repeat,angularjs-ng-model
I'm trying to create a form that has a dynamic set of input boxes. I'm trying to get ng-models to work with array items and I am clearly doing something wrong. My problem seems to be indexing the scope array lineItems in the template. Here is my jsfiddle: http://jsfiddle.net/dk253/9ykuuobq/ Here...

Angular not binding ng-click

javascript,angularjs,directive
I am building an export function for my app in angular. I need to have clickable buttons that would call an export function in the scope. I tried to use ng-click="myFunction()", but the export is not called … Here is my jade template ul.dropdown-menu(role='menu' aria-labelledby='dLabel') li a(export-content-as, export-type='markdown', export-content='properties.quill.getHTML', href='',...

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

Binding array controller/directive

angularjs,binding,controller,directive
I'm having trouble binding a controller array with a directive : Markup : <custom-directive item="tag" selectedItems="selectedArray" ng-repeat="tag in tags"></custom-directive> Controller : $scope.selectedArray= []; Directive : scope: { item:"=", selectedItems:"=" }, controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) { //Undefined console.log($scope.selectedItems); } The binding for item works fine, what am...

Can one tell me the actual use of ng-Cloak directive in AngularJs?

angularjs,directive
Today I attended an interview, and the Interviewer asked me: What is ng-cloak directive? why we use it? In AngularJs, I studied some tutorial, but I can't understand It. Anyone can help me? ...

ng-class expression: merge condition and class name

javascript,angularjs,expression,directive,ng-class
Supposing I have 3 variables (they can change its value): $scope.A = 'one'; $scope.B = true; $scope.C = false; <div ng-class="A"></div> renders <div class="one"> <div ng-class="{'two': B, 'three': C}"></div> renders <div class="two"> How can I merge a variable and a expression to render <div class="one two">? Do I have to...

Insert an HTML Tag Into an Angular Directive

html,angularjs,dom,tags,directive
I want to use an Angular directive to wrap a Bootstrap panel. I'm running into a problem, though, if I want to use HTML tags within the body of the panel. Given: $scope.panel = { title: "Title", body: "This is some <strong>cool</strong> text!" }; I would want my panel to...

How to use $compile inside an Angular directive?

angularjs,scope,directive
I have a collection of 500 items (persons) that I am rendering in an Angular ng-repeat directive. Each item has three fields (FirstName, LastName, Company). I want the user to be able to see details / edit the items below each rendered row. I have a button (Font Awesome square-plus)...

How to access more than 2 DOM elements “The AngularJS way”?

html,angularjs,dom,directive
I'm starting to learn angularJS better, and I've noticed that AngularJS tries to make strong emphasis on separating the view from the controller and encapsulation. One example of this is people telling me DOM manipulation should go in directives. I kinda got the hang of it now, and how using...

How can I use special characters in angular directives attributes?

javascript,angularjs,utf-8,special-characters,directive
I would like to use strings including german characters (Ä, Ö, Ü) in attributes of a custom angularJS directive. For example: <my-custom-directive my-label="Lärm" /> Another example is the ui.bootstrap.tabs directive: <tabset> <tab heading="Lärm"> content ... </tab> <tab heading="Second Heading"> content ... </tab> </tabset> This results in a tab with heading...

Angular Directive won't show up

javascript,html,angularjs,angularjs-directive,directive
While studying about directives, I keep getting something basic wrong because I simply cannot make one work in order to import something from another html file. HTML (index.html) <!DOCTYPE html> <html ng-app="myapp"> <head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><script type="text/javascript" src="app.js"></script></head> <body> <hello-world></hello-world> </body></html> HTML (ssth.html - in the same directory...

Passing params to nested directives with isolated scope

angularjs,data-binding,scope,directive
I have an object data in the MainCtrl. This object is used to pass data to directives first-directive and second-directive. Two-data binding is neccesary in both cases. For first-directive, I pass the complete object data but for second-directive I want to pass numbers object (scope.numbers = scope.dataFirst.numbers). The problem: When...

AngularJS directive: scope

angularjs,scope,directive
I have the example below: HTML: <body ng-controller="MainCtrl"> <p>Hello {{name}}!</p> <p>Result is {{result}}!</p> <output-content data="name"></output-content> </body> JavaScript: var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.result = "no"; $scope.changeLabel = function() { $scope.result = 'yes'; } }); app.directive('outputContent', function() { return { restrict: 'E', replace: true, templateUrl:...

C/C++ language file generation with Apache Velocity

java,c++,apache,velocity,directive
I need to generate a C/C++ source file and I thought to use velocity because I already have the sample output file and only need to change some dynamic parts from the sample. The problem is that the template file contains a lot of #define's and #include's. Is there a...

How to track behavior of ngModel array item using .directive

javascript,angularjs,directive,watch,angular-ngmodel
Hi everyone I'm use angularjs not so long time ago and now I have one issue related with this framework that i can't to solve. So the problem in next: I have few input fields that generate via ng-repeat: <div class="form-group" ng-repeat="(i, name) in name_list track by $index"> <div class="row">...

AngularJS Passing changing values from Controller to a Directive Controller

javascript,angularjs,controller,directive
I'm pretty new with angular and I've read a lot of threads here and googled this topic but I cannot get a clear answer. What I'm trying to do is pass a value that is not set until the user makes a selection, at which point my controller will make...

AngularJS directive: scope with named controller

angularjs,controller,directive
I have the example below. HTML: <body ng-controller="MainCtrl as MgtCtrl"> <p>Hello {{MgtCtrl.name}}!</p> <p>Result is {{MgtCtrl.result}}!</p> <output-content data="MgtCtrl.name" result="MgtCtrl.result"></output-content> </body> JavaScript: var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { var MgtCtrl = this; MgtCtrl.name = 'World'; MgtCtrl.result = "no"; MgtCtrl.changeLabel = function() { alert('changeLabel'); MgtCtrl.result = 'yes'; } });...

how to simplify the