FAQ Database Discussion Community


Corrent means of coding a directive in Angular

angularjs,directive
I have some code here <div ng-repeat="student in students" class="student"> <div class="col-md-2"> <div class="row placeholder"> <img data-src="holder.js/200x200/auto/sky" class="img-responsive profile" alt="200x200" src="#" data-holder-rendered="true"> </div> </div> <div class="col-md-10" style="padding: 17px 40px;"> <div class="row"><h1 class="name"><a href="/database/profile.php?id=2015552117"><span>{{ student.FirstName }}</span> {{ student.LastName }} , {{...

directive can not ''require:ngRepeat'

angularjs,angularjs-directive,angularjs-ng-repeat,ng-repeat,directive
I write below directive to make call a function when ngRepeat element gets rendered on UI. Directive directives.directive('repeatDone', function() { return { restrict: 'A', require: 'ngRepeat', link: function(scope, element, attrs, ngModel) { if (scope.$last) { scope.$eval(attrs.repeatDone); } } }; }); But it is giving $compile error. If I remove require...

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

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

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

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

AngularJS - Directive wrapping without losing connection to controller

javascript,angularjs,angularjs-directive,controller,directive
Is there a way for not losing connection to the current controller when you are wrapping data with a directive ? My problem is, that the directive within the wrapped template has no connection to the outside controller any more and so I can not execute the function. Wrapping Directive:...

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

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

Angular Directive: bind 'mouseover' event to an element

javascript,angularjs,events,bind,directive
In my controller, I have the following array of users, which will be displayed by iteration in the partial html template in controller: vm.users = [ {"username": "johnDoe", "address": "Saltlake City, UT", "age": 34}, {"username": "janeDoe", "address": "Denver, CO", "age": 33}, {"username": "patrickDoe", "address": "San Francisco, CA", "age": 35} ];...

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

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

How to set value to element in directive template with jQuery

javascript,jquery,angularjs,angularjs-directive,directive
I have some directive and some template in it. angular.module('testModule', []) .directive('testInput', function () { var id = 1; return { restrict: 'E', replace: true, scope: { model: '=' }, template: '<div><input type="text" id="{{uniqueId}}"/></div>', link: function (scope) { scope.uniqueId = "test" + id++; $('#' + scope.uniqueId).val(33); } } }); I...

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

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

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

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

Directive Angularjs, $watch and HTML Element

html,angularjs,element,directive,watch
I have a question. I coded a HTML page with an angularjs directive this is my code <menufileupload visible="rightVisible" alignment="right"> <input type="text" ng-model='expr'/> <!--Other stuff--> </menufileupload> I'm trying to use a $watch to check any change in the text field $scope.$watch(...) only worked when the text field is out of...

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

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

Do directives that share a required ^parent share parent's $scope?

angularjs,scope,require,directive
I'm having an issue where I'm using require in both myDirectiveChild1 -- C1 myDirectiveChild2 -- C1 The children's directive require: ^myDirectiveParent -- P P defines $scope.myVar but C1 and C2 seem to be over-writing the value of parent P's $scope.myVar instead of each having their own copy. Is that normal?...

Isolated Scope View binding

javascript,angularjs,directive
I have been working with isolated scope directives for a little time and a question came in mind watching it's behavior: Why can't i bind variables that i define inside the directive inherited scope directly to the view? Let me show an example on this code pen: http://codepen.io/anon/pen/VLKjrv When i...

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

ng-repeat not working within directive

angularjs,compilation,directive
I've created an Angular wrapper for drop.js which is a javascript library for popups. All works great within the drop directive including normal Angular bindings except when using ng-repeat. Here is a screenshot, notice the content of the popup has a value that is bound to the controller but the...

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

Angularjs directive call controller function

javascript,angularjs,controller,directive
i have a directive which renders a long list. The Rendering works pretty fine and fast, now i would like to call a function on the Controller with Parameters. How can i achieve this? Here is my directive: .directive("slheats", function () { return { restrict: "A", scope: { slheats: "=",...

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

Angularjs controller required by directive can not be found in transclude content

angularjs,directive
Recently I use angular to develop a directive, there is an directive which like ng-repeat to generate some records, I used transclude to implement it. but it raise an error that "Controller 'aArea', required by directive 'bSpan', can't be found!". 1. ModuleA code var moduleA = angular.module("moduleA", []); moduleA.directive("aArea", function...

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

How to pass object to a directive in angularjs?

javascript,html,angularjs,directive
I have a widget which is attached to a resizable directive, i have a highchart placed inside this directive and want to get this chart resized whenever the container is resized. It works well, but when i am using the same directive for different charts, i need to pass the...

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

Angular js. Assign Controller with Directive

angularjs,directive,controllers
I try to connect the controller with the directive in Angular. Here html <div ng-controller="MyCtrl"> <div id='bbb' my-num>Click Me!</div> </div> I use the MyCtrl controller where I define tegid and mytitle. MainControl.controller('MyCtrl', ['$scope', function($scope) { $scope.tegid = ''; $scope.mytitle = 'aaa' + tegid; }]); Also I have the directive myNum...

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

Angularjs - Custom directive cannot access controller scope

angularjs,scope,code-injection,directive
I am building a single page app with Angular JS. The problem is the custom directive mySlider cannot access the scope of the controllers I assign to the template. Is there a way to solve this problem? Here are my files index.html <script src="js/dishesapp.js"></script> <div ng-view></div> partials/dishestemplate.html <div my-slider></div> directives/slider.html...

.byte directive in 6502: Where it is stored

assembly,directive,6502
A duplicate may be put on this question, but the particular questions with the same concept as mine have not been answered in one single way. The .byte directive stores bytes into ROM unused by instructions. (the several questions with similar topics as mine had answers stating this) I have...

How to correctly implement in AngularJs: Custom directive reuse several times in single page

angularjs,directive
I created a custom directive that has event handler on it and use it 3 times. <div sl-entity-browser btn_label="Browse supplier" handler="supplier_selection_handler(entity)" /> <div sl-entity-browser btn_label="Browse checker" handler="checker_selection_handler(entity)" /> <div sl-entity-browser btn_label="Browse approving officer" handler="approvar_selection_handler(entity)" /> In my controller: $scope.supplier_selection_handler = function(entity){ $scope.selectedSupplier = entity; } $scope.checker_selection_handler =...

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'; } });...

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

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

how to simplify the