I am using a custom directive in combination with a custom validator. The problem I have is that myForm.$valid is true for a short moment before being invalidated.
<form name="myForm">
<!--If min-size="2" is added here, you don't see the Valid flashed-->
<!-- I guess this is because no directive is used? -->
<div name="testlist1" ng-model="data.testlist1"></div>
<div testlist name="testlist2" ng-model="data.testlist2" min-size="3"></div>
<div ng-if="myForm.testlist2.$valid">
This is not flashed!
</div>
<div ng-if="myForm.$valid">
This is flashed for a short time when loading!
</div>
</form>
**data.testlist1 and data.testlist2 ara both empty arrays
Full example here:
https://plnkr.co/edit/MLILBxtqzA1x0IoPBZQb?p=preview
Someone has an idea why this is happening? And how to solve this?
Edit:
I found this note on the angularjs website.
Note that child elements that contain templateUrl directives will not have been compiled and linked since they are waiting for their template to load asynchronously and their own compilation and linking has been suspended until that occurs.
I guess this is the reason? But is there a way to fix it?
Related
I've been struggling with this for a few hours, and I'm coming up blank. I wouldn't build this this way, but this is someone else's code and refactoring it all is way beyond the scope of my part of the project. I need something that works within the way it's currently built. Here is a rough approximation of what the html looks like:
<div ng-controller=OuterController as outerController>
<button ng-click="save()" ng-disabled="?????">Save</button>
<div ng-controller="PartialController as partialController>
<div partial which can be replicated a bunch of times and called recursively>
<form name="partialForm></form
</div>
</div>
</div>
So, there can be a ton of instances of partialForm within the dom, which may be different degrees of childhood from the OuterController, and I want to be able to check if any of them have ng-invalid for the ng-disabled on the save button.
Any thoughts? :)
I would like to create a header directive with swappable controls. The header contains a search input, which stays the same throughout the application, and a number of buttons, which differ from page to page.
I considered usage of child directives that can be passed as arguments, but they are giving me a multidir error due to multiple template requests:
header.html
<div class="header">
<input type="text">
</div>
mode1.html
<div class="controls">
<buutton>Foobar</button>
</div>
Usage:
<app-header mode1>
My second thought was to use a shared service that initializes the available controls by determining the active mode. That seems a little weird, though.
How can I create such a directive with different modes?
I've just started looking at AngularJs. I was attempting to use a custom directive inside a tr element. I get the following error regarding the switch directive
Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!
Some sample code is here: http://plnkr.co/edit/YiSFYK5l8mNIlBo6OGFW
Even after I removed the swtich it still doesn't seem to do anything. I changed the repeat direct to be over currentSheetData and removed the swtich entirly but there's no code in the rows.
However in my example I do the same setup inside a div element and it works fine. Would someone explain what I'm doing incorrectly
You need ng-switch directive on the parent node before declaring ng-switch-when on the child node.
Example:
<div class="animate-switch-container"
ng-switch on="selection">
<div class="animate-switch" ng-switch-when="settings">Settings Div</div>
<div class="animate-switch" ng-switch-when="home">Home Span</div>
<div class="animate-switch" ng-switch-default>default</div>
</div>
https://docs.angularjs.org/api/ng/directive/ngSwitch
I am trying to do what looks like a simple process: to display a list of items received from an HTTP request with animation.
First of all, here is my way of doing it ( I am open to any suggestions to do it in a better angular way ):
I define a scope variable state that I initialize to loading in my controller and that I change to loaded when I receive data from the HTTP request.
I initialize a scope variable items with the received data.
In my view, I use ng-switch for the states, and ng-repeat with the items.
I define an animation with css on ng-repeat.
Here is a plunkr ( with a $timeout instead of the request ).
I cannot understand why the animation does not work.
Any help will be appreciated. Thanks.
The reason it is happening is because your ng-when. The same thing happens with ng-if, but would work fine if you used ng-show.
The problem is that when your ng-when condition returns true, the ng-when first renders it's content in a detatched dom (so animations do not happen). This dom is then attached to the dom tree (this step is animated but you would have to put your animation class on the ng-when).
When using something like ng-show or ng-hide things work as expected because the dom is always attached (it is simply shown/hidden).
This might be considered either a bug or a limitation of ng-animate, you might want to post a github issue and see if the angular guys have any thoughts.
It seems to be a "feature" of angular that it won't add .ng-enter to repeat items inside ng-switch-when block. You can remove ng-switch-when="loaded" and it will work (You don't really need it as ng-repeat won't do anything if there is no items)
<div ng-switch="state">
<div ng-switch-when="loading">
<p>Please wait...</p>
</div>
<div >
<ul ng-repeat="item in items" class="animate-items">
<li>{{item}}</li>
</ul>
</div>
</div>
http://plnkr.co/edit/ocEj7BSQPSeIdnnfAOIE?p=preview
I'm building a reasonably non-trivial Angular-js application for the first time and am trying to establish some intuition about how to get things done. Most things are making sense, but there's one pattern in particular that has me stumped -
Whenever I place an "include" style directive inside an ng-switch, it is ignored. I've experimented with just about every style of ng-switch, ng-include, and ng-transclude I can think of to achieve the desired behaviour, but to no avail. I haven't noticed any documentation indicating that this would be disallowed, nor any equivalent style of pattern.
Here is an example of what I have tried to do:
<div ng-switch="is_logged_in()">
<div ng-switch-when="true">
logged-in:
<div ng-include="'views/logout.html'"> </div>
</div>
<div ng-switch-default>
not-logged-in
</div>
</div>
The expected behaviour being that the logout form is displayed when $scope.is_logged_in() returns true.
The behaviour I see is that "logged-in:" is displayed, but the include isn't.
I've tried various versions of Angular-js. I've inspected the network traffic and seen that the include is in-fact being fetched, but I can't get this to work. I've had the same behaviour manifest when trying to build my own template control structures using directives.
The way I've seen most examples dodge this is by using JS in a directive to manually show/hide various sections of the transcluded content - is this really the idiomatic way to get the behaviour I'm looking for?
Thanks!
While using ng-include I always assign the path to a variable in controller.
$scope.logoutlink ='views/logout.html'
And in the view you can assign as
<div ng-include="{{logoutlink}}"> </div>
It would be helpful to post a JSfiddle link.