Search Posts

Category: angularjs-directive

How does AngularJs making bind by reference in its directives

sometimes when i pass variable by reference using ‘=’ in my directive, and update the referenced variable in the parent controller, it does not get updated instantly, but it gets updated after making $scope.$digest(). what i think is that angular doesn’t make reference binding like JS binding, but when the scope digest its just update its referenced variables. i don’t know if my theory is right. what do you think? Source: AngularJS

Refer to HTML element from directive angularjs

I’m doing some DOM manipulation by adding function on click event inside my directive. Basically it’s animation of moving 4 little boxes to right and showing 4 “new” boxes sliding from left side. For real that’s just 20 boxes in line with hidden overflow that you can see only 4 at time and on click it’s just adding margin-left: -270px to pretend horizontal scrolling. Currently I’m “catching” this 20 elements with document.querySelectorAll(“.last-added-element”).forEach(function(elem) { and this […]

Restrict typing by RegExp in AngularJS

I coded an angular directive for inhibiting typing from inputs by specifying a regex. In that directive I indicate a regex that will be used for allow the input data. Conceptually, it works fine, but there are two bugs in this solution: In the first Plunker example the input must allow only numbers or numbers followed by a dot [.], or numbers followed by a dot followed by numbers with no more than four digits. […]

Create controllers in ng-repeat directive

I am trying to refactor my AngularJS code. My goal is to create dynamically controllers responsible for view of data from REST API. My idea is to use ng-repeat directive and inside it create div with ng-controller directive with parameter from ng-repeat output. Unfortunatelly I don’t know how to pass data to single iteration. AngularJS code (function () { ‘use strict’; angular .module(‘App’) .controller(‘ActionData’, ActionData); ActionData.$inject = [‘$scope’, ‘AlertService’, ‘$http’, ‘taskId’, ‘$state’, ‘$timeout’, ‘$uibModal’, ‘toastr’]; […]

Why the scope variable data is not passing via directive in AngularJS?

I have a html page <!DOCTYPE html> <html xmlns=””> <head> <title></title> <script src=”dependency/jquery/jquery-2.1.4.min.js”></script> <script src=”dependency/angular/angular.min.js”></script> <script src=”js/main_app.js”></script> </head> <body ng-app=”NMEFApp”> <form> <div ng-controller=”MainController”> First Name : <input type=”text” id=”txtFirstName” ng-model=”Person.firstName” /> <br /> Last Name: <input type=”text” id=”txtLastName” ng-model=”Person.lastName” /> <br /> <input type=”button” ng-click=”init();” value=”Initialize” id=”btnInit” /> <div> Hello : {{ Person.firstName }}&nbsp;{{ Person.lastName }} </div> <employee-information childperson=”Person”></employee-information> <employee-information childperson=”Child”></employee-information> </div> </form> </body> </html> and an app.js file var NMEFApp = angular.module(‘NMEFApp’, []); NMEFApp.controller(“MainController”, […]

Using <select> with ng-repeat twice in angular js in same controller in same form

I am a newbie in angular js. I was trying to create a form with one angular controller and having 2 elements both using ng-repeat to populate values. However only the first select control is getting populated (I tried to populate 2nd select control first, that also seems to be working. The whole point is only the first select control is getting populated.) The following is my code. <div class=”form-group box” data-ng-app=”myApp”> <form name=”studentRegForm” id=”app-form” […]

Watch functions accumulate when Angular UI modal is opened

I have the following code in a directive. The directive is included in an Angular UI modal: var watchObjects = function(){ scope.vars.forEach(function(elem,i){ scope.$watch(‘vars[‘+i+’].obj’, function(newValue, oldValue) { if (typeof newValue === ‘undefined’) return; console.log(newValue) }); }); }; When the modal is opened and the directive is loaded, in the link function I invoke watchObjects only the fist time I open the modal. If I call watchObjects every time I open the modal, the number of watch […]

How to use Shared Scope with ControllerAs

So I have a directive that looks like this: function mngMomentView() { return { restrict: ‘AE’, scope: false, templateUrl: ‘/layout/momentView/momentView.html’, controller: ‘MomentViewController’, controllerAs: ‘vm’ }; }; Here is how I am basically using the directive (Some code omitted of course): <span ng-repeat=”moment in vm.moments”> <div mng-moment-view></mng-moment-view> However here’s the problem. I would like both my parent scope and my custom directive to use the controllerAs syntax. However, inside my directive’s controller it seems like it […]

Next Page »