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?
Related
I have a simple search form which I have it included in two different pages using ng-include directive. I would like to bind them both to the same scope in such a way that when the user navigates between the pages, they'll keep seeing the same search data they've entered in either of the copies.
I have managed to implement an untidy solution using rootScope, but would like to know if this can be implemented in a proper, cleaner way?
I also used root scope slove it, my layout below:
<div id="page-header" ng-include="'views/layouts/header.html'"></div>
<div id="content">
<div ui-view="content" ng-cloak></div>
</div>
<div id="page-footer" ng-include="'views/layouts/footer.html'"></div>
<div id="toastElement">
<ul id="toastBox"></ul>
</div>
header.html bound HeaderController, the functions in HeaderController include search, login, logout, register and both working on $rootScope. Is it helpful?
In the project I work on there are list "manipulation controls", like:
The parts of this controls are the same at 90% of the pages. So I'm thinking about writing "manipulation controls" Component, so I wouldn't change sizes at every page, just in Component's template if I need to (all these col-xs-*), or just copy/paste html for each input separately.
<div class="row">
<div class="col-xs-7 form-inline">
<div class="col-xs-9">
<!-- Search input -->
</div>
<div class="col-xs-3">
<!-- Type select -->
</div>
</div>
<div class="col-xs-5 form-inline right">
<sort-by ng-model="sortBy" ng-change="setCurrentPage(1);" values="{{sortValues}}"></sort-by>
<items-per-page ng-model="itemsPerPage" ng-change="setCurrentPage(1);"></items-per-page>
</div>
</div>
Is it a good idea to make such "container" component? Is there any tutorial on how to make it properly (some of the inputs might be hidden, i.e. list is small and there is no need for pagination, every placeholder, title are unique in general, so there might be many variables to pass)?
This is more or less architecture question, I'm not experienced in this, but to my mind the idea of writing such component is good. If I'm mistaken or the question isn't specific enough, please argument it.
Yes, it is a good idea to turn reusable code into components.
Yes, passing configuration variables is how you would customize it for each use case. Using ng-show, ng-hide, ng-if, ng-switch, ng-class, ng-style, etc ... there are many ways to implement the options in your template.
When you have a large number of options, it is common practice to pass them as one object. (ie. config="{foo: 'bar', baz: 'biz'}" vs foo="bar" baz="biz").
Yes, it's a good idea: that's the purpose of directives (or components, in the new 1.5x implementations): inject in your HTML some reusable components in an intelligent way.
Think if you ever need to bind a variable to your "containers": you'll be able to do it easily and with no pain at all, by using directives/components.
Alternatively, if you don't need any form of logic inside your "containers", you could use ng-include with templates to inject html in your pages, like this:
<div ng-include"myContainer.html"></div>
and somewhere in your "templates.html"..
<script type="text/ng-template" id="myContainer.html">
<!-- content -->
</script>
What you are looking for is Angular directive (https://docs.angularjs.org/guide/directive)
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?
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.
So I am trying to evaluate AngularJS as I think it is interesting however it is quite different from what I have been using which is BackboneJS. As part of this evaluation I want to take a few page of my existing Backbone application and try to port them over to AngularJS. So I have the following html layout:
<html>
<head>
</head>
<body>
<div class="page-wrapper">
<div class="header-wrap">
<ul>
<li>Ryan Zec</li>
<li>Admin</li>
<li>Logout</li>
</ul>
</div>
<div class="content-wrap">
<form>
<input type="text" name="username" value="" />
<input type="password" name="password" value="" />
<input type="button" value="Login" />
</form>
</div>
<div class="footer-wrap">
<span>Copyright © 2012 - Ryan Zec
</div>
</div>
</body>
</html>
Now in backbone I would have the div with the -wrap classes be empty and to contents for each section one would go in individual templates (and each section could have more than one template that might display in it). There would then be a view associated for each template to would attach to the correct element and display the contents of the template in it.
Now with AngularJS, it is discouraged to do direct DOM manipulation everywhere except in directives. So I am wondering what is the best way to have the same setup in AngularJS that I do with BackboneJS keeping in mind that the content of these sections need to be switched out for different content based on the page/url they are viewing? (I know I can add the ng-directive-name to the div so on initial load, it load correctly but how do I get it to reload to different data when the page is switched in a single page application).
Answer is directives :)
you can either use this -> http://jsfiddle.net/thaqL/
or just download chrome -> go to http://angularjs.org -> press F12 -> check out how they did it
hope it helps.
cheers
I think for the time being the best answer is ngInclude. I think that the AngularJS team wants to make routes more powerful (based on something I remember reading) in the future (like multiple views per route where each should should have a controller for the header, a controller for the footer, and a controller for the main content) but until then ngInclude should hopefully get me by.