I think this is one of the hardest concept for me to understand with angularjs’s directive. The document from http://docs.angularjs.org/guide/directive says: transclude – compile the content of the element and make it available to the directive. Typically used with ngTransclude. The advantage of transclusion is that the linking function receives a transclusion function which is … Read more
I’m trying to build a directive that takes care of adding more directives to the element it is declared on. For example, I want to build a directive that takes care of adding datepicker, datepicker-language and ng-required=”true”. If I try to add those attributes and then use $compile I obviously generate an infinite loop, so … Read more
I have a list of items in my view with ng-click attached to them: <ul id=”team-filters”> <li ng-click=”foo($event, team)” ng-repeat=”team in teams”> <img src=”https://stackoverflow.com/questions/23107613/{{team.logoSmall}}” alt=”{{team.name}}” title=”{{team.name}}”> </li> </ul> I’m handling the click events in the foo function in my directive, passing $event as a reference to the object that’s been clicked, but I’m getting a … Read more
I need to perform some operations on scope and the template. It seems that I can do that in either the link function or the controller function (since both have access to the scope). When is it the case when I have to use link function and not the controller? angular.module(‘myApp’).directive(‘abc’, function($timeout) { return { … Read more
I have a very boiled down version of what I am doing that gets the problem across. I have a simple directive. Whenever you click an element, it adds another one. However, it needs to be compiled first in order to render it correctly. My research led me to $compile. But all the examples use … Read more
I’m trying to set the src attribute of an iframe from a variable and I can’t get it to work… The markup: <div class=”col-xs-12″ ng-controller=”AppCtrl”> <ul class=””> <li ng-repeat=”project in projects”> <a ng-click=”setProject(project.id)” href=””>{{project.url}}</a> </li> </ul> <iframe ng-src=”{{trustSrc(currentProject.url)}}”> Something wrong… </iframe> </div> controllers/app.js: function AppCtrl ($scope) { $scope.projects = { 1 : { “id” : … Read more
I’m looking for some guidelines that one can use to help determine which type of scope to use when writing a new directive. Ideally, I’d like something similar to a flowchart that walks me through a bunch of questions and out pops the correct answer – no new new scope, new child scope, or new … Read more
I have seen a number of questions on StackOverflow discussing ng-transclude, but none explaining in layman’s terms what it is. The description in the documentation is as follows: Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion. This is fairly confusing. Would someone be able to … Read more
I am handling my issue like this: ng-style=”{ width: getTheValue() }” But to avoid having this function on the controller side, I would much prefer to do something like this: ng-style=”{ width: myObject.value == ‘ok’ ? ‘100%’ : ‘0%’ }” How can I do this? 11 Answers 11
I have a directive, here is the code : .directive(‘map’, function() { return { restrict: ‘E’, replace: true, template: ‘<div></div>’, link: function($scope, element, attrs) { var center = new google.maps.LatLng(50.1, 14.4); $scope.map_options = { zoom: 14, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP }; // create map var map = new google.maps.Map(document.getElementById(attrs.id), $scope.map_options); var dirService= new google.maps.DirectionsService(); var … Read more
