Search Posts

Category: directive

Dynamically adding multiple custom directives associated with single controller in angularjs 1

I have an html template attached to a controller and three directives. There are three buttons. On clicking a button a directive is added to the page(using ng-click) like this(the following is in my controller not in directive): $scope.addFilterDimension = function() { console.log(‘CLICKED!!!!!!!’) var divElement = angular.element(document.querySelector(‘#filterDimension’)); var appendHtml = $compile(‘<filter-directive></filter-directive>’)($scope); divElement.append(appendHtml); } Similarly for other buttons, other directives are added. Now, I can keep adding as many of these directives as I like, which […]

Two way data binding doesn’t work from directive link function angularjs

I’m trying to use variable declared in directive’ link: function in directive view html. Variable which I’m trying to use is int from object which is (this object) declared as $scope variable named slider. I’m trying to display it and use within ng-class like this: aa : {{ slider.step }} <span class=”main__last-added-dot” data-ng-class=”slider.step == 1 ? ‘main__last-added-dot–active’ : ””></span> And printed value is aa : 1 and it’s not changing althougt it should be. It’s […]

Nodelist from angularJS directive is empty [duplicate]

This question already has an answer here: AngularJS directive runs before element is fully loaded 3 answers I’m creating directive with some DOM manipulation within. At the moment I created html markup, service from where I gather data to display and basic directive structure. HTML <div class=”col-lg-8 col-md-8 col-sm-12 col-xs-12″> <div class=”row u-no-margin”> <div class=”col-lg-11 col-xs-11″> <h2 class=”main__heading”> Ostatnio dodane </h2> <div class=”main__last-added-field”> <div class=”main__last-added a” data-ng-repeat=”n in lastAddedElements”> <div class=”row u-no-margin main__last-added-container”> <div class=”col-lg-3 […]

accessing directive scope variable inside the controller [duplicate]

This question already has an answer here: Bindings on directive with Isolate scope not in scope sometimes 1 answer parentData is being assigned a value in the parent controller. testDir directive is being called in the parent html. <test-dir directive-data=”parentData”></test-dir> testDir directive: app.directive(‘testDir’, function () { return { restrict: ‘E’, scope: { directiveData: ‘=’ }, controller: ‘myctrl’, templateUrl: ‘view/myView.html’ }; }); myCtrl controller: app.controller(‘myCtrl’, [‘$scope’, function($scope) { $scope.newVar = $scope.directiveData; console.log($scope.directiveData); //printing undefined. console.log($scope); //prints […]

Jasmine – TypeError: undefined is not a constructor

I have an directive for displaying tooltip like follow: angular.module(‘cui.directives.cuiEllipsisTooltip’, []) .directive(‘cuiEllipsisTooltip’, [‘$compile’, ‘$timeout’, function($compile, $timeout) { ‘use strict’; return { restrict: ‘A’, scope: true, link: function(scope, element, attrs) { var raw = element[0]; var hasTooltip = false; var leaveEventPromise = null; element.on(‘mouseenter’, function() { if (raw.offsetWidth < raw.scrollWidth) { if (hasTooltip) { scope.enabled = true; } else { scope.tooltip = element.text(); scope.enabled = true; element.attr(‘data-toggle’, ‘tooltip’) .attr(‘data-original-title’, scope.tooltip) .removeAttr(‘cui-ellipsis-tooltip’); $compile(element)(scope); hasTooltip = true; element.tooltip(‘show’); […]

angularjs directive different binding from array

While angular.forEach it returns only last value from personList. How for each object in personList show info with created directive? I need exactly solution in forEach loop. var app = angular.module(‘MyApp’, []) app.controller(‘MyController’, function ($scope, $compile) { var personList = [ { name: “John”, age: “20” }, { name: “Peter”, age: “25” } ]; angular.forEach(personList, function(p, i) { $scope.person = { name: personList[i].name, age: personList[i].age }; var personInfo = ($compile)(‘<person-info></person-info>’)($scope); var body = document.querySelector(“body”) var […]

angularjs doesn’t work custom directive in uibModal

I want Korean in modal input tag. so I make kr-input directive. .directive(‘krInput’, function() { return { priority : 2, compile : function(element) { element.on(‘compositionstart’, function(e) { e.stopImmediatePropagation(); }); } }; }); and using directive like this <input type=”text” class=”form-control” ng-model=”modalController.message” required kr-input/> but kr-input not working. I input “안녕” but “안녀” or “안ㄴ”. //parent controller var modalInstance = $uibModal.open({ animation : true, templateUrl : ‘modal.html’, controller : ‘ModalController as modalController’, size : ”, backdrop […]

Angularjs scope var in template of custom directive

I have a custom directive hello myapp.directive(‘hello’, function() { return { link : function (scope, elem, attr) { scope.url = attr.url; console.log(scope.url); }, template: ‘<div ng-include=”‘[{url}]'”></div>’ }; }); my html code is <div url=”mypage.html”></div> I get the value mypage.html in my console.log but is not able to include the page it says http://127.0.0.1:5000/[%7Burl%7D] Source: AngularJS

Next Page »