angularjs-directive

I've upgraded to Angular 1.5 which now supports the .component() helper method in the efforts to help users transition to AngularJs 2. Unfortunately there are not many tutorials out there on it. I have the following simplified custom directive and template URL. Can anyone help me write this in .component() form? By doing this I should get the basics of it and and should be able to use it for more complex directives. Thanks in advance. DIRECTIVE angular.module("formText", []) .directive("formText",['$http','formService','$mdDialog', function($http,formService,$mdDialog){ return{ scope:{headId:'

I have a form with few fields, however a select and an input field are coupled: the validation on the input depends on which value the user chooses in the select field. I'll try to clarify with an example. Let's say that the select contains names of planets: <select id="planet" class="form-control" name="planet" ng-model="planet" ng-options="c.val as c.label for c in planets"></select> in the input I apply custom validation via a custom directive named "input-validation": <input id="city" input-validation iv-allow-if="planet==='earth'" class="form-control" name="city" ng-model="city" required>

I have created a directive that accepts some attributes and initializes the isolated scope with these attributes. If an attribute isn't specified, then the isolated scope should be initialized with a calculated value. I added a link function that inspects the scope and initializes the default values (if no value has been set using the attributes). The scope has been initialized, but if I set a default value then it will be overwritten later by the framework. A workaround is to use $timeout(...) and set it afterwards, but this seems too much of a hack. function ($timeout) { return { scope: {

Angular 1.5 component communication suggestions usually have output bindings to invoke methods on root controllers. Let's say I have a root component, and two child components. <root> <child-1></child-1> <child-2></child-2> </root> It'd like to react to a button click on component one by reading a value on component two and then doing something in the root. For example, child-1 is a directive which wraps a drawing library that attaches a drawing to its DOM node and has a variable to control that drawing. child-2 has a button. When it is clicked, data from the child-1 variable should be passed

I've written a AngularJs directive with TypeScript to Copy modelValues to the clipboard and the "old" $scope version for directives works fine so far: module App.Directives { interface ICopyToClipboardScope extends ng.IScope { sqValues: ng.INgModelController; copyToClipbaord(): void; } /* * Usage: <div sq-copy-to-clipboard ng-model="viewModel.Name"></div> */ export class CopyToClipboard implements ng.IDirective { public restrict: string = "A"; public replcae: boolean = true; public require = "ngModel"; public template: string = '<a ng-click="sqCopyPateCtrl.copyToClipboard()" class="btn btn

i am using angularjs directive to redirect another html page.i am writing click function inside directive but i am getting page name in alert box not redirect to another html page. sample.html: <test1> <button data-ng-click="click('/page.html')">Click</button> </test1> sample.js: app.directive('test1',['$location', function(location) { function compile(scope, element, attributes,$location) { return{ post:function(scope, element, iAttrs,$location) { scope.click=function(path) { alert("click"+path); $location.path('/path'); }; } }; } return({ compile: compile, restrict: 'AE', }); }]); i want to

I'm trying to convert jQuery plugin into directive. Here is the library: Github . In the documentation there is an option : $(document).ready(function() { $("#datepicker").datepicker(); $("#datepickerbtn").click(function(event) { event.preventDefault(); $("#datepicker").focus(); }) }); Directive I've created : app.directive('dateP', function(){ return{ restrict:'A', require:'ngModel', link:function(scope, element, attr, ngModel){ $(element).datepicker(scope.$eval(attr.dateP)); console.log('hey'); ngModel.$setViewValue(scope); } } }); but it's not working , any help would be appreciate it .

I'm fairly new to AngularJS and trying to think the Angular way. Right now I'm working on an app that has different features that register in an angular service called FeatureRegistry . From there they are taken and inserted into a sidebar from an FeatureSelectionController . By clicking on a feature the startFeature() function of the appropriate feature should be invoked, and after that the feature should be added to the main view (but where should this DOM manipulation occur?). So there is my question. What is the best way (the angular way) of adding directives to the DOM, I don't