Update: ngKeypress, ngKeydown and ngKeyup are now part of AngularJS. <!– you can, for example, specify an expression to evaluate –> <input ng-keypress=”count = count + 1″ ng-init=”count=0″> <!– or call a controller/directive method and pass $event as parameter. With access to $event you can now do stuff like finding which key was pressed –> … Read more
I am not quite sure about your question. But i think your are wondering why there are different syntax styles in angular directives. First off all, please have a look at this post: Difference between double and single curly brace in angular JS? The answer explains the difference between {{}}, {} and no braces. For … Read more
ng-change requires ng-model, <input type=”text” name=”abc” class=”color” ng-model=”someName” ng-change=”myStyle={color:’green’}”>
Although @user1737909 already referenced the SO question to read (What are the nuances of scope prototypal / prototypical inheritance in AngularJS?, which will explain the problem and recommended various ways to fix it), we normally try to give the answer on SO. So, the reason your fiddle doesn’t work is because when a primitive type … Read more
It will be helpful to consider what Angular and React are each doing “behind the scenes.” In your Angular example, when you write <div classy/></div> you’re saying “render a DIV element and then attach to it the behaviors defined by the classy directive. In your React example, when you write <MyComponent classy></MyComponent>, you’re saying, “create … Read more
Use HTML5’s form attribute, here’s a sample: angular.module(‘app’, []) .controller(‘MyCtrl’, [‘$scope’, function($scope) { $scope.submitted = false; $scope.confirm = function() { $scope.submitted = true; }; }]); form { padding:5px; border: 1px solid black } <!DOCTYPE html> <html ng-app=”app”> <head> <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js”></script> <meta charset=”utf-8″> <title>JS Bin</title> </head> <body ng-controller=”MyCtrl”> <form id=”myform” ng-submit=”confirm()”> <label for=”myinput”>My Input</label> <input type=”text” … Read more
You can inject dependencies to the directive like in other modules: .directive(‘myDirective’, [‘$timeout’, function($timeout) { return { … link: function($scope, element){ //use $timeout } }; }]);
I’ve encountered oddities like that with directive and table elements. See this issue for example. Try wrapping your template with div tag or use replace:false.
Just change to: is-open=”opened” to: is-open=”$parent.opened” Fixed Demo Plunker So relevant snippets of HTML will look like: <div class=”input-group”> <input type=”text” class=”form-control” datepicker-popup=”dd.MM.yyyy” ng-model=”dt” is-open=”$parent.opened” ng-required=”true” close-text=”Close” /> <span class=”input-group-btn”> <button style=”height:34px;” class=”btn btn-default” ng-click=”open()”> <i class=”icon-calendar”></i></button> <b><- button not working</b> </span> </div>
Does this work for you? angular.directive(‘extLabel’, function() { return { restrict: ‘E’, scope: { api: ‘=’ }, link: function(scope, iElement, iAttrs) { scope.api = { doSomething: function() { }, doMore: function() { } }; } }; }); From containing parent <ext:label api=”myCoolApi”></ext:label> And in controller $scope.myCoolApi.doSomething(); $scope.myCoolApi.doMore();