FAQ Database Discussion Community


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

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

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

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

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

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

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

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

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

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

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

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

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

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} ];...

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

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

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

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

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

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

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

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: "=",...

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

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

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

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

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

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

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

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

how to simplify the