angularjs-directive

How do I get the input element from within the directive before the template overwrites the contents? html <div xxx> <input a="1" /> </div> js app.directive('xxx', function(){ return { restrict: 'A', template: '<p></p>', replace: true, //if false, just leaves the parent div, still no input compile: function(element, attrs) { console.log(element); return function (scope, iElement, iAttrs) { } } }; }); i am on angular 1.0.x, I cannot pass in optional scope parameters with the '=?' syntax and i want to be able to override a portion of the default template of the directive in a very flexible way.

For some reason AngularJS does not fire off the event when {{$index}} is used in ng-click. My html: <div ng-controller="Ctrl"> <ul> <li ng-repeat="foo in foos"> <label>{{foo.name}}</label> <a href="#" ng-click="remove({{$index}})">X (doesnt work)</a> <a href="#" ng-click="remove(0)">Remove first element (works)</a> </li> </ul> </div> jsfiddle: http://jsfiddle.net/Lcasg/3/ Anyone knows how to fix this? Thanks The value of the ng-click attribute is evaluated as an angular expression, so simply use remove($index) . solved! <div ng-repeat="idiomax in textos.idiomas "> <div class="idioma" ng-click=

I'm trying to test a Directive in Angular, but I can't get the corresponding template to work. The directive lists the templateUrl like so templateUrl: 'directives/listview/view.html' Now when I write any unit-test, I get Error: Unexpected request: GET directives/listview/view.html So I have to use the $httpBackend and respond with something sensible like httpBackend.whenGET('directives/listview/view.html').respond("<div>som</div>"); But really I want to simply return the actual file, and also do it synchronously, so there's no issues with waits, deferred objects etc. How to do that? I now use

I have a composite list directive - that is - a list item that can be a list himself. The parent directive defines the controller: .directive('parent', function() { controller: function($scope) { }, link: function (scope, element, attrs) { } }) The list (of items) requires the parent controller which by itself works fine (why shouldn't it..): .directive('list', function() { require: '^parent', link: function (scope, element, attrs, parentCtrl) { } }) The same goes as well for the concrete item, which is also fine: .directive('item', function() { require: '^parent', link: function (scope,

DEMO Why in the following example $render is not called when the button is clicked? <input type="text" ng-model="client.phoneNumber" phone-number> <button ng-click="client.phoneNumber='1111111111'">Change phone number</button> .directive("phoneNumber", function() { return { restrict: 'A', require: 'ngModel', link: function(scope, element, attrs, ngModel) { ngModel.$render = function() { alert('rendering'); // This is not called }; } }; }); The input directive is running after your directive and thus it's $render function is replacing yours. Set your directive's priority to something greater

I have a fieldset that has a ui-view under it. Each view had lots of fields(a field is a directive that wraps an input) under it. It looks something like this: <fieldset ng-disabled='myCondition'> <div ui-view></div> // this changes with lot's of fields that look like <div field='text-box'></div> </fieldset> Now, this worked great, the fields get disabled on all browsers except IE . I've done some google and seen that ie doesn't support fieldset + disabled and I'm looking for a quick workaround. I've tried some things that were close but not perfect and I assume I'm not the first one that

i'm trying to do a nice fadeout+fadein transition when the currentVertical changes. in knockout it was so simple but i can't figure it out here. please help. the following code displays a UL list which is "bound" to a pricings array in the $scope.currentVertical when an LI element is clicked, the $scope.currentVertical is changed and the UL list updates accordingly. This works fine, but i would like the entire #container div to fade out and fadein when $scope.currentVertical is changed. Please help... My html: <body> <h1>Pricing Poll</h1> <div ng-controller="VerticalsController"> <div id=