w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories
AngularJS: How to make parent directive using transclusion be compiled before the child directive?
did you try to transclude in the mother element ? in fooDir Directive: transclude: true replace: true template: "<div ng-transclude></div>" and after in the child barDir Directive require: '^fooDir'

Categories : Javascript

how to make a directive modify the content of another directive?
I had the same question before and have Fiddle example, for calling Directive from directive. Maybe it will help you. HTML <div ng-controller="MyCtrl"> <div directive-foo></div> </div> JS var app = angular.module('myApp',[]); app.directive('directiveFoo', function() { return { template: '<div directive-bar="123">bar</div>', replace: true, controller: function() { console.log('in foo ctrl'); this.isFooAlive = function() { return 'Foo is alive and well'; } } } }); app.directive('directiveBar', function() { return { controller: function() { console.log('in bar ctrl'); }, require: 'directiveFoo', link: function(scope, element, attrs, fooCtrl) { console.log(foo

Categories : Javascript

how can i make this try_files directive work?
a very common try_files line which can be applied on your condition is location / { try_files $uri $uri/ /test/index.html; } you probably understand the first part, location / matches all locations, unless it's matched by a more specific location, like location /test for example The second part ( the try_files ) means when you receive a URI that's matched by this block try $uri first, for example http://example.com/images/image.jpg nginx will try to check if there's a file inside /images called image.jpg if found it will serve it first. Second condition is $uri/ which means if you didn't find the first condition $uri try the URI as a directory, for example http://example.com/images/, ngixn will first check if a file called images exists then it wont find it, then goes to second ch

Categories : Nginx

How to make directive re-render view in Angular?
Yes - you can use the $window property to keep a watch over the change to the size of the window. Here is a fiddle. Original discussion can be found here (from where the fiddle was picked)

Categories : Angularjs

Angularjs: How make a directive active only one templates
You need to unbind the event listener once the scope of the element (on which the directive is applied) is destroyed. So, you can do something like: var keypressHandler = function(e){ scope.$apply(scope.keyPressed(e)); }); jQuery(document).on('keypress', keypressHandler); iElement.on('$destroy', function() { jQuery(document).off('keypress', keypressHandler); }); You can read about $destroy HERE.

Categories : Angularjs

AngularJS - Make a directive "scope-sensitive"
If you want a single directive to behave differently based on scope, then checking some scope property seems perfectly reasonable to me. The closest I think you can come to polymorphism in Angular is to put shared things (data, functions, etc.) into a service, then inject that service into the places you want polymorphism (directives, controllers, other services, etc.).

Categories : Angularjs

make a simple pie chart directive with d3js
Two issues Values isn't a string - it has already been parsed and is an array of objects. The slices representing each object are being and colored according to their population and age properties. Both of those are currently undefined, so you'll have to add that information to the JSON that you load or change how the slices are sized and colored.

Categories : Angularjs

Can I make the transcluded scope of a directive be the same as the parents?
Instead of trying to make the transcluded elements refer to the parent scope, it is better to use object properties: $scope.obj = {stuff: 'arf'}; fiddle Since the transcluded scope prototypically inherits from the parent scope, the transcluded scope has access to all of the parent scope properties. By using object properties, "writes" go to the parent scope properties. (When using primitives, "writes" create new properties on the child transcluded scope, which hide/shadow the parent scope properties of the same name.)

Categories : Javascript

Tying to make my AngularJS directive wait for interpolation to happen
I like your new solution better than what I'm going to present... but another way to get it to work is to add a directive (eventOnLast) to your ng-repeat that will check for $last, and then send an event that a myPopoverLink directive can listen for: <li ng-repeat="detail in details" event-on-last> myModule.directive('eventOnLast', function($rootScope) { return function(scope, element) { if(scope.$last === true) { element.ready(function () { console.log('broadcast'); $rootScope.$broadcast('event:interpolationDone'); }) } } }) myModule.directive('myPopoverLink', function ($compile, $interpolate) { return function (scope, element) { scope.$on('event:interpolationDone', function() { console.log('event'); doPopover(e

Categories : Angularjs

Can I make PyYAML apply one %TAG directive to multiple documents in one stream?
This is definitely malformed YAML--each document in a YAML stream is independent from the previous, and may have different directives set on it. Admittedly the standard is a little unclear on this, though Section 9.2 states: "Note that each document [in a stream] is independent of the rest, allowing for heterogeneous log file entries." It looks like the Parser class has a DEFAULT_TAGS attribute that maps the default tag handles: https://github.com/yaml/pyyaml/blob/master/lib/yaml/parser.py#L76 As a workaround you could either modify that dict in place (Parser.DEFAULT_TAGS[u'!x!'] = u'tag:x.y,2013') or, perhaps better, might be to subclass the base Parser class and make your own Loader class that uses your parser: from yaml.parser import Parser from yaml.reader import Reader from yaml.

Categories : Python

How can I make a directive in AngularJS to validate email or password confirmation without DOM manipulation or jQuery?
After looking at the numerous helpful ways to implement this kind of directive, I figured out how to do it without DOM manipulation or using jQuery. Here's a Plunk that shows how. It involves using: ng-model properties on the $scope for both input fields $parse(expr)(scope) and a simple scope.$watch expression -- to evaluate the "match" property in the context of the current scope against the $modelValue of the control on which you add the match attribute directive. Disabling the submit button if the $invalid property is true on the underlying form. I hope this is useful to some. Here's the gist: var app = angular.module('app', [], function() {} ); app.directive('match', function($parse) { return { require: 'ngModel', link: function(scope, elem, attrs, ctrl) { scope.

Categories : Javascript

Rendering AngularJS directives from array of directive names in a parent directive or controller
So the second attempt would have worked had I used $compile on the prepended directives like so: .directive('parentDirective', function($compile) .... element.prepend($compile('<div ' + scope.directives[i] + '"></div>')(scope));

Categories : Javascript

Directive model binding doesn't work under angular ui bootstap tabs directive
The AngularUI boostrap directive creates a child scope, so a quick fix is to use the following inside your "Second" tab: <my-directive ng-model="$parent.ranges"></my-directive>

Categories : Angularjs

Is it possible to call functions from parent directive controller, when subsidiary directive has isolated scope
directives can share controllers via the require property, that you correctly specified. this is what Angular's docs on directives say about accessing the directive's controller (emphasis added): "require - Require another directive and inject its controller as the fourth argument to the linking function. The require takes a string name (or array of strings) of the directive(s) to pass in. If an array is used, the injected argument will be an array in corresponding order. If no such directive can be found, or if the directive does not have a controller, then an error is raised" IMHO, when applied to your case, this means that the link function where the controller is injected is the one in your child directive, not in the parent

Categories : Javascript

bind event in a directive doesn't work if the directive is in a ng-repeat loop
you need app.directive('mySelect', function() { return { restrict : 'E', template : '<select><option>1</option><option>2</option></select>', link : function(scope, element, attributes, ngModelCtrl) { element.bind('change', function() { console.log("change !"); }); } } }); Demo: Fiddle

Categories : Angularjs

How to prevent transcluding directive to create new child scope for the form directive?
An interesting question, but a problem that's easily avoided by using <form name="appForm" ng-submit="submit(appForm.$valid)"> and checking the parameter in the submit function. http://jsfiddle.net/udMJ7/ Another (perhaps better) option is to use this which is set to the scope of the last controller (in this case the form controller, which we want) $scope.submit = function(){ if(this.appForm.$valid){ //post the form!! } }; http://jsfiddle.net/udMJ7/1/

Categories : Angularjs

Trouble $watching model being passed to parent directive through directive attribute
When using an isolate scope, only those properties referenced in scope: { ... } are available to the view and the directive. Use mod everywhere and it will work: <form child-watch mod="inputModel" name="form"> <input type="text" name="one" ng-model="mod.one"> <input type="text" name="two" ng-model="mod.two"><br/> <p>Model in attribute: {{attribute}}</p> <p>Original model: {{mod}}</p> </form> Plunker

Categories : Angularjs

In Angularjs can a controller nested inside a directive set the ng-model of the directive?
http://jsfiddle.net/jSEba/ This is one way to satisfy your need by using event emission. i.e. letting directive to $broadcast event into its child scope, so that transcluded child scope can catch via $on to react to the button click. angular.module('myApp', []) .directive('fooDirective', function(){ var template = '<div><div ng-transclude></div> <button ng-click="someFunc()">I want to update ng-model in the directive, which in turn will update myController $scope.viewModel.foo</button></div>'; return { transclude: true, template: template, link: function(scope, elem, attrs) { scope.someFunc = function() { scope.$broadcast('buttonclick', { valname: attrs.fooDirective }); };

Categories : Javascript

Angularjs Button loading state directive with ng-disabled directive
You can listen to the ng-disabled property in the parent's scope, and if it is disabled then just simply does nothing. The trick is to watch on ngdisabled property like this scope.$watch(attrs.ngDisabled, function (newVal) {... I want to shed some light on since I can't test your code without other pieces, you probably can do something like this: .directive("btnLoading", function () { return function (scope, element, attrs) { //maybe you need just scope.$watch instead of scope.$parent.$watch. Depends on your impl. scope.$parent.$watch(attrs.ngDisabled, function (newVal) { //you can make the following line more robust if (newVal === 'disabled' || newVal === 'true') return; function () { return scope.$eval(attrs.

Categories : Twitter

Angular js passing a variable from a parent directive to a child directive
First, the correct syntax to "require" the parent controller is: require:"^supNavDirective" Second, you must add returnNavTree method to the controller instance itself (instead of $scope) to access it from the child directive, like this: ... controller: function ($scope, $element) { this.returnNavTree = function(){ return $scope.navtree } }, ...

Categories : Javascript

Debugging AngularJS Databinding Inline Directive vs Directive in ngTemplate
There are multiple problems in your code 1) You have defined ng-controller Multiple times.Please be informed that everytime you define a ng-controller a new scope is created 2) your model test is a primitive which will cause problem during prototypical inheritance instead watch on object not primitive type directly https://github.com/angular/angular.js/wiki/Understanding-Scopes I have modified your fiddle which is working now :http://jsfiddle.net/ADukg/3037/ $scope.newtest={value:true}

Categories : Angularjs

Angularjs control flow from directive to controller back to directive
In my solution I'm allowing a service to have access to the markers that are on the map and another service which communicates to the backend for content. The service that accesses the marker allows me to add a directive for the popup and bind it to a marker. The popup directive could have additional information that is filled out by the retrieved data. The content getting service works by using a promise, which is resolved with the data when the backend returns. I just used a $timeout, but you will be using $http. me.GetData = function() { var def = $q.defer(); $timeout(function() { def.resolve('<span> wooo! </span>'); }, 2000); return def.promise; }; The popup service binds to the marker (with some default elements if needed) and waits for the con

Categories : Angularjs

Using ng-switch in angularjs directive and using that directive in ng-grid cellTemplate
In your cellTemplate change myData to my-data. When using angular directives camel case is converted to dash case automatically by the angular library. For example if you have a directive element defined as "mySuperAwesomeDirective". It would be declared in html using the following. <my-super-awesome-directive></my-super-awesome-directive> Here is a working version of your plunker example. http://plnkr.co/edit/ENj00Re3bfaVGPlomhFG?p=preview

Categories : Angularjs

Is it possible to access instances of a directive from inside the directive definition?
I would combine the directive with a drawer service. Use the drawer service to expose things that are needed to coordinate across various models, views, etc. For example, you can have each drawer directive register itself to the service (for example, send in a callback for notification). Then you can have a method on the service that when invoked will send a message to all registered drawers to close. This also makes it cleaner to implement because if anything else has to interact with drawers, they can interact with the service instead of the directive and remain decoupled from the UI implementation.

Categories : Javascript

Passing parameter to ng-click directive, within custom directive
Figured this out. Hope it helps anyone else stuck on it. Firstly this ng-click="togglePhoto({{$index}})" Should be ng-click="togglePhoto($index)" Braces not needed! Secondly I found that you can pass the event object into the click function eg ng-click="togglePhoto($event)" Then catch that event and find out what element trigged it in your click function $scope.togglePhoto = function(e) { console.log(e.currentTarget) }

Categories : Angularjs

Angularjs: set parent directive scope value with child directive
First, watch this video. It explains it all. Basically, you need to require: '^parentDir' and then it will get passed into your link function: link: function (scope, element, attrs, ParentCtrl) { ParentCtrl.$scope.something = ''; }

Categories : Angularjs

angular.js: using a directive to insert another directive as an attribute
After the compilation, AngularJS only calls $compile for all of the child elements. The element itself is not automatically recompiled, so adding a directive at this stage will not have effect. In your case, I think you can change it from a compile function to a link function (so you get a scope argument), and call $compile(element)(scope) yourself. See this Fiddle where I have a directive that adds style="color: red", and another directive that "dynamically" adds that directive. It doesn't work, unless I call $compile afterwards. HTH!

Categories : Javascript

how to pass directive attribute to directive template?
Personally, I like creating child scope for element directives: http://plnkr.co/edit/Dz7fcZaT4KdRDa869rwm?p=preview app.directive('rating', function() { return { restrict: 'E', scope: { paramItem: '@' }, link: function(scope, element, attr){ console.log(scope.paramItem); } } }); There are a couple other ways too, depending on how you expect your directive to work.

Categories : Angularjs

Passing method through a directive to a parent directive
resolve: "&" is a mapping. So here: myApp.directive('grandParent', function() { return { scope:{ resolve: "&" }, link: function($scope, $element) { $scope.resolve = function(selected){ $scope.text = selected } } }; }); you are trying to map "resolve" to ... nothing, because "grandParent" doesn't have any attr named "resolve". If you want to share some staff betweens directives you should do something like that: view <div data-grand-parent resolve="resolved()"> <div data-parent ></div> </div> Directives var app = angular.module('test'); app.directive('grandParent', function() { return { scope : { resolve : "&" // in view we defined resolve attr

Categories : Javascript

angular ng-animate directive with ng-show directive
You need to be running AngularJS version 1.1.4 or newer, with 1.1.5 being the latest right now. You also need to use a different set of CSS rules — they've changed since the first release. Updated jsbin Modify your HTML to point to 1.1.5: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> And change your CSS rules to use .show-animation for setup and .show-animation.show-animation.active for the active animation: .show-animation { background-color:red; -webkit-transition:all linear 0.5s; -moz-transition:all linear 0.5s; -ms-transition:all linear 0.5s; -o-transition:all linear 0.5s; transition:all linear 0.5s; opacity: 0; } .show-animation.show-animation-active { background: blue; opacity: 1; } Also please n

Categories : Angularjs

Inner-directive communication on all repeated instances of a directive
Given what you're trying to achieve, I would do this. Basically use scope notification to communicate among the elements. directive('highlightable', function() { return { link: function(scope, element, attrs) { var color = '#DEE4FC'; scope.$on("reset", function() { element[0].style.backgroundColor = 'transparent'; }); element.bind('click', function(e) { scope.$parent.$broadcast("reset"); element[0].style.backgroundColor = color; }); } }; }); Demo: link Updated sze correctly points out that my solution is only suitable if you need exactly one list (which appears to be the case from your question). However, it's very easy to accommodate multiple lists while

Categories : Angularjs

How to pass directive parameters to directive
Depending on what you need, you usually want to create a sibling scope for the directive (that is, a scope that lives out of the normal hierarchical scope, inheriting the upper levels) to allow multiple directive to live within the same level without affecting each other's properties. If you have a look at AngularJS documentation entry for directives, under directive definition object, you can see three different property binding you can specify in your directive's scope definition. Take this scope definition of your directive, as an example: scope: { urlParamAttr: '@URL_PARAM', urlParamEval: '=URL_PARAM', urlParamFn:'&URL_PARAM' } @ / @name: This definition will bind an attribute's plain value to the directive scope. In the example, a urlParamAttr property on your direct

Categories : Javascript

Angularjs directive inside directive
I think you could try by passing the controller of the parent directive to the child, the values will be bound at the same time in both directives. I made an example here : http://jsfiddle.net/DotDotDot/pVYL6/3/ (I couldn't use your code so I used something shorter) Actually, I added a controller to the first directive (your resourcedirective) where I define some getters : .directive('parent',function(){ return { scope:{action:'@'}, controller: function($scope, $element, $attrs) { this.getAction=function(){ return $scope.action; } } } }); The directive gets the action in the parameters, and this action can be accessed by getAction(). I use this instead of $scope because the goal is to use the controller in another directive. You can still add

Categories : Angularjs

angularjs using directive as attribute of another directive
It looks like issue is that your $watch is not firing because the value is still true on subsequent clicks. The issue you have is that your focus can be on only on one input. So, all button/inputs pairs need to know how to 'reset' themselves to false when one of their peers is clicked-to-focus. I would instead do the reverse - set the true value of the directive that gets focus instead of the true value triggering the focus. You can create a new kind of directive that listen to clicks (like how ng-click works) and then traverse the directive's children to find the input to trigger its focus. This same directive can have a 'blur' event in its link() to know to set its boolean to false (i.e., controlFocus or inputFocus). EDIT Your directive myControl was create an isolate scope when yo

Categories : Angularjs

Angular Directive to Directive call
It sounds like you are looking for a directive controller. You can use the require: parameter of a directive to pull in another directive's controller. It looks like this: app.directive('foo', function() { return { restrict: 'A', controller: function() { this.qux = function() { console.log("I'm from foo!"); }; }, link: function(scope, element, attrs) { } }; }); app.directive('bar', function() { return { restrict: 'A', require: '^foo', link: function(scope, element, attrs, foo) { foo.qux(); } }; }); From the angular docs, here are the symbols you can use with require and what they do. (no prefix) - Locate the required controller on the current element. ? - Attempt to locate the requir

Categories : Javascript

Custom directive inside custom directive doesn't fire
The reason it doesn't work is because your tile directive creates an isolate scope, meaning any parent scope variables will not be accessible to the tile directive's children. Since the 'basicAreaChart' variable is defined in MainCtrl, it will not be accessible to the template tile2.html As to how to fix this, you can do it various ways. The simplest would be to abstract the data you need to construct your chart out into a service: app.factory('ChartData', function(){ return { get : function(id){ return //Your data based on logic } } }); app.directive('chart', function(ChartData){ return { //Configuration properties scope : { chartDataKey : '@' }, link : function(scope, element, attrs){ var d

Categories : Angularjs

AngularJS directive - setting order for multiple directive elements (not priority for directives, but priority for the elements)
OK, here's my solution, although it's more a template. Fiddle (check the console log to see the result) I've wrapped the foo directive in a fooParent directive, like so: <div foo-parent> <div foo run="3"></div> <div foo run="1"></div> <div foo run="2"></div> </div> The fooParent directive exists pretty much to do three things: Expose a function to foo items so they can be added to a general list Maintain a list of foos, which will be sorted during post-linking Process each foo in the run order specified. It looks like this: app.directive('fooParent', function() { var foos = []; return { restrict: 'A', controller: ['$scope', '$element', '$attrs', '$transclude', function($scope, $element, $attrs, $t

Categories : Javascript

A directive inside a directive
AngularJS doesn't know to compile anything from your markdown. There are two ways to get that stuff to compile. One way is using transclusion, but I don't think that will work for your usecase. In your case, you will need to compile the changes from your markdown. To do this, you use Angular's $compile service. first, inject the $compile service into your directive. Then after setting element.html(html), try this: $compile(element.contents())(scope);

Categories : Angularjs

Why ng-transclude's scope is not a child of its directive's scope - if the directive has an isolated scope?
Why ng-transclude's scope is not a child of its directive's scope if the directive has an isolated scope? ng-transclude designed to allow directives to work with arbitrary content, and isolated scopes are designed to allow directives to encapsulate their data. If ng-transclude didn't preserve scopes like that, any arbitrary content that you're transcluding would need to know the implementation details of your directive (i.e. it would need to know what's available on the isolated scope you created). If it's not a bug, how can a container directive pass data to it's content, if not by setting attributes like I tried. If the container directive and contained directives are coupled - i.e. you wrote both of them and need them to act together - then they should communicate via a shar

Categories : Angularjs

How do you make make an input field opacity not effect the text color inside it?
For that you could use background-color: rgba(0, 0, 0, 0.5). The first three numbers are the background color in rgb (red, green, blue) format and the fourth number is the opacity leve on a scale from 0 to 1.

Categories : HTML



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.