directive

So I made a directive for a toggle (drop down) menu in AngularJS. I used the directive for multiple items within the page but I have a small problem. When one item is open and I click another one I want the previous one to close. The event.preventDefault and event.stopPropagation stops the event for the previous item and doesn't close it. Any ideas on how to fix this? Is there a way to perhaps only stop the event within the scope? app.directive('toggleMenu', function ($document) { return { restrict: 'CA', link: function (scope, element, attrs) { var opened = false; var button = (attrs

I am using the direct following and I do not detect the copy and paste with the keys inside the input, would someone know how? Thank you! export class OnlyNumberDirective { // Allow decimal numbers. The \, is only allowed once to occur private regex: RegExp = new RegExp(/[0-9]+(\,[0-9]{0,1}){0,1}$/g); // Allow key codes for special events. Reflect : // Backspace, tab, end, home private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home', 'Delete', 'Del', 'Ctrl', 'ArrowLeft', 'ArrowRight', 'Left', 'Right' ]; constructor(private el: ElementRef) { } @HostListener('keydown', [ '$event

I have divs that expand and contract when clicked on. The Masonry library has worked great for initializing the page. The problem I am experiencing is that with the absolute positioning in place from Masonry and the directive below, when divs expand they overlap with the divs below. I need to have the divs below the expanding div move down to deal with the expansion. My sources are: http://masonry.desandro.com/ and https://github.com/passy/angular-masonry/blob/master/src/angular-masonry.js /*! * angular-masonry <%= pkg.version %> * Pascal Hartig, weluse GmbH, http://weluse.de/ * License: MIT *

I am writing my angularjs directive with definition like: return { restrict: 'EA', link: link, scope: true, transclude: true, replace: true, controller: controller, template: '<div class="wizard">' + '<div ng-transclude></div>' + '</div>' }; I notice two scopes was created: < Scope (003) --- parent scope of directive < Scope (004) --- controller scope of directive which I think is child scope created by 'scope=true'. all my functions, properites defined in controller show up in this scope < Scope (005) --- transclude scope which is empty from the document I am expecting only one child scope

Usage: <my-directive my-var="true"></my-directive> Directive: app.directive('myDirective', [ function () { var definition = { restrict: "E", replace: false, transclude: false, scope: { myVar: '@', }, controller: ['$scope', function($scope) { console.log($scope.myVar); // "true" $scope.myVar = "false"; console.log($scope.myVar); // "false" setTimeout(function() { console.log($scope.myVar); // "true" (!) }, 100); }] }; return definition; } ]); Console output "true" "false" "true" What is exactly happening here? The variable is passed as string ("true"), I'm changing it, then it get's replaced

I am trying to get getter/setter support for ng-model by implementing a directive that will take care of getting and setting the values to/from the view/model. I am almost there, but I end up in infinite $digest loops. The idea is to set ng-model="$someFieldToStoreInTheScope", and then have the getter/setter directive do the updates between that field and the getter/setter functions. I use $watch to update the model using the setter expression when the ngModelController updates the field in the scope, and another watch to update that field when the getter expression changes. Have a look at: