FAQ Database Discussion Community


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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