angularjs directive isolated scope within link method - angularjs-directive

My jsbin is here: http://jsbin.com/yapi/1/edit
I am testing the isolated scope within link method of the directive (it works when used within template instead).
My goal is that link method in different directives to be able to share and change same data (by reference, not by value). So that if a link method in one directive changes the data then it gets reflected in link method in other directives.
However, it does not seem to work as you can see in the jsbin link. e.g. if you change Dir 1 it does not change Dir 2 and vice versa.

i would use Angular's pub/sub pattern
Here is an article the talks about best practices
I would have a bunch of directives that interact with there own scope data,
when data changes in a directive it can $broadcast('message', data) a change to that data
other directives can listen $on('message', function(data){})
If you want everything to rely on the same data, then just use a service (singleton) that all the directive interact with

Related

Separate CSS file for each angular2 component affects performance of page?

All the guides about Angular2 propose to have a separate file for css styling for each component. As I get is so far, for each custom directive there is the need to make requests to the server to get the html and css for that directive (component). If this is the case, what is the performance impact for the page when multiple requests are made for multiple directives? Is there any other recommended way?
That's only true during development. A build step (currently work in progress) will inline resources and generate code for declarative bindings. In the end there will be only a minimum number of requests.
Some related issues:
https://github.com/angular/angular/issues/8717
https://github.com/angular/angular/issues/8550
https://github.com/angular/angular/issues/8759
https://github.com/angular/angular/pull/8097
https://github.com/angular/angular/issues/6612#issuecomment-175894674
https://github.com/angular/angular/pull/8400

How to load a Polymer element after an event occurs?

For instance, a user logs in (dynamically, no page refresh) and only then do I want to load up my polymer elements.
You can load polymer elements dynamicaly using Polymer.import(['myElement.html']) function. More on: Polymer helper methods
also you could use the app router element that allows you to use the hash in the URL lo just import the number of elements you are going to use, or even it can load all of them and just charge if the hash is the correct one
look at https://github.com/erikringsmuth/app-router

Use a System.Data.Linq.Binary object as an HTML image source

I'm using ASP.NET MVC and have a model that has System.Data.Linq.Binary property. The property represents a picture that has been stored in the database as an image column.
I am able to use the picture in my pages by setting up a separate controller action and using Response.OutputStream.Write to dump the Binary object and then setting the controller action as an HTML img source.
I'm wondering if there is any way to use a Binary object directly in a view without needing the separate controller action? The idea would be to achieve the below which I know will not work but it demonstrates what I'd like to be able to do.
<img src="<%= Model.MyBinaryProperty%>" />
By nature of the problem, no.
You can simulate it, but you will always be relying in a separate request that serves the image.
There are just too many options, some:
Use a regular asp.net handler
Only retrieve on the separate request vs. Store somewhere temporarily and serve from there during the request. Usually the earlier is best
Use a controller action
Depending on the load characteristics and only if really needed, serve the image download from a different server
Setup a route + routehandler that serves the image
Setup an action filter that by some convention handles serving the image without needing to explicitly define the separate action method.
I'm sure there are others ...

ASP.NET MVC: ActionLink vs bare url

In ASP.NET MVC I see I have handy HTML helpers that I can use to construct form fields and any number of other little things. But then there's 'ActionLinks'.
Why use an ActionLink instead of just writing the darn url myself in an HTML anchor tag?
In other words, why would I use
<%: Html.ActionLink("Back to List", "QuantityTypes") %>
instead of just using plain ol' HTML and writing:
Back to List
Surely, I must get something extra with the ActionLink. I'm just missing it, right?
The action link will build you the proper URL based on the controller, action, areas, params, etc... It generates the URL based on the URL mapping rules defined in the your MVC routing system. It will map params to the correct url as well depending on if it needs to be included in the URL directly or via a querystring param.
Yes you could do it on your own and just type it all out but it builds the URL for you and ensures the URL that is generate is correct. It's a helper function... it helps you produce valid links :)
You should read Scott Guthrie's post and pay extra attention to the section "Constructing Outgoing URLs from the Routing System". It gives the why and explains other helpers that leverage the routing system.
You get centralized control of your URL's. So next time you need to change one for SEO purposes, you don't have to go searching for every place in the application, just switch it in the Global.asax.
What if you wanted to change the controller name from Internal to External. What is going to happen? You are going to need to change the href link by hand. ActionLink will do automatic routing. You don't need to mess with urls.
Another reason for using ActionLink over bare url is that you may need to expose a download link to a secured resource that can only be accessed by the application through identity impersonation.

Why does Wicket changes the id of the html elements?

If I write
<form wicket:id="form" id="form>
or even
<form wicket:id="form>...
Then the rendered HTML shows the id 'form' appended with different numbers whenever the page is refreshed e.g.
<form id="form7"....
Is there a way to disable this behavior of the Wicket framework?
We set markup ids by hand extensively on our project to ease automatic testing with Selenium testing framework. It definitely works.
Component.setOutputMarkupId(true); // write id attribute of element to html
Component.setMarkupId("someid"); // id attribute of element is "someid"
This is the behavior you want in most cases when using wicket. The dynamic id is meant to prevent id collisions when Ajax behaviors are added to components or added to ajax responses for refreshing. For any of these situations, you really need both the client response and the server side state to be in cahoots. If there are external js resources you need the id of a component for dom lookup, then I would suggest adding a custom wicket component behavior that would then generate the js call to a function passing in the generated id.
I realize what I'm going to describe leads you more into the forest of Wicket. But I have been more than happy with the ajaxy stuff that Wicket opens up for you out of the box.
This is Wicket desing feature. You can use class for linking styles and components.
<form wicket:id="form" id="form>
Also you can to try (I never did it) setMarkupId . I'm not sure that it good way.
It has been a while since I worked with Wicket, but I remember that when wicket uses ajax elements, its ids are auto-generated (the id of the tag, not the wicket:id). You can control the id of the tag when not using and ajax element. In your case, since there is no code, I would guess that you will have to change any AjaxButton or Ajax* from your form.
Yes you can write custom JavaScript... you just need to implement it according to the 'Wicket way'. You can decorate components, Ajax calls etc. with custom JavaScript, then it all plays nicely.