I'm using AngularJS ver. 1.6.8.
I have a component I have built called icons. To incorporate it in a page I just add <icons></icons> and the component is inserted into the page.
Now I have a scope variable that holds html, and part of that html is the previously mentioned code <icons></icons>.
When I use ng-bind-html it doesn't compile the component and instead just shows <icons></icons> as text.
I have tried using angular-bind-html-compile (link) but that didn't help.
All of the solutions I found seem to support angular pre made directives and not newly formed components.
Happy to hear of any possible solutions.
Did you do the following on your scope variable which holds the html code? This is a common mistake.
$scope.trustAsHtml('<div>....')
But as mentioned before, without your code it is hard to figure out the problem.
Related
Background
I am trying to create a blog using Angular (5). I am using markdown and storing that data outside the application. It downloads the markdown, parses it into an html string, then binds to the innerHTML of a div.
I understand that I am working against the grain, but I would really like to be able to create an elegant solution here.
Problem
Having the ability to use custom components gives us the ability to do a bunch of stuff with our blog that we won't be able to do otherwise. Signup components, custom widgets, etc. We can do all this and still have the ability to store the content separately outside of the application.
Custom components are not detected from the innerHTML string. Which doesn't allow it. It seems like DynamicComponentLoader used to provide a solution for this, but not anymore.
Clarity
I am not trying to render only the html, or only a single component. I want to render the html and all components included.
I also don't care that it's bound to the innerHTML property, it just seemed to get me the furthest. I can/will use a resolver if that would help.
Example
https://stackblitz.com/edit/angular-wylp55
As you can see the hello component renders in the html, but not the component itself.
Any help would be appreciated.
So I finally figured this out and did a write up.
Here's the link to the updated stack blitz.
https://stackblitz.com/edit/angular-dynamic-html.
I also did a full write up on my company blog. https://www.arka.com/blog/dynamically-generate-angular-components-from-external-html.
Due to certain circumstances, I'm forced to move my Angular 2 App to AngularJS.
Most of my Components have their own StyleUrl property for their specific stylesheets. So far searching online, I haven't found a way to do so in AngularJS, except integrating Webpack to my project, however I'm having trouble doing so.
I was wondering if there's another way, and if there isn't, what's the proper way of using Webpack for this?
EDIT: 5/9/2017:
Wanted to give an update on my situation. After some testing on the Dynamic CSS loading module which Yeshwanth provided, I discovered that the component CSS leaked to the outside DOM, which meant I had to keep searching for another solution.
Eventually I resigned to use the SCSS approach: Inside the component template, define one, big, encapsuling div element, and give it an ID of some kind. Then, inside an .scss file, write the style block for that ID and INSIDE that block place all of your component styles. After compiling the SCSS file, the resulting css file will act only on the component's elements.
I'm not sure if this fully emulates the emulated Shadow Dom of Angular 2, but for my purposes it was enough. Hope this helps.
I think in angular 1.x you cannot import style specific to your component.
But the dynamic css loading might come handy.
Please refer this
I was working on an angular app (phonegap+ionic+angular), I had written a custom directive which registered an event listener for that element (which would activate iScroll for that element on load event). The directive was working fine when all the view was in index.html. I decided to refactor the code and intorduced nested views and routes using ui-router. Now the directive seems to be not functioning. I tried making a mock directive that would just console.log() and nothing happened.
Am I missing something here?
Any kind of help or lead would be highly appreciated.
Thanks.
I have found the problem and the solution to my problem. I'm posting here so that others facing similar problems could benefit from it.
Turns out, since my directive did not run because it was executed before the sub view was loaded. So I solved the problem by just adding a
scope.$watch("$viewContentLoaded") wrapper around my directive's codes and it started working.
I'm using the Reusable Click to Edit Directive from Icelab. I've used it successfully in several places in my app, but I run into problems when I try to edit elements that are inside other directives.
As the directives are calling the elements one by one, as in the following code:
<my-continent text='{{questions.n2A.answer.1.name}}' continent-id="1"></my-continent>
I don't see how can I implement the reusable directive in them, as it generates a general block of html code, not a specific one for each element called with the directive my continent.
I've created a Plunker where the problem is visible.
If I add the click-to-edit directive into my-continent, it breakes. You can see what I mean on line 47 of the html, when I add click-to-edit="questions.n2A.answer.1.name" onto the line as shown under.
<my-continent text='{{questions.n2A.answer.1.name}}' continent-id="1" click-to-edit="questions.n2A.answer.1.name"></my-continent>
Any idea about what am I missing?
Thanks!
I've used your plunker to check your problem and the moment I added click-to-edit to myContinent I've got an error in console linking to this:
Error on AngularJS
So basicly your code is not working because you create new scope in both directives. Hope that helps
Firstly, sorry for my poor English.
I'm learning AngularJS recently and I found that many of AngularJS's concept are very advanced especially the Directive. It's much like the Shadow DOM or Web Components, and even better.
But I came up with a question about the directive(We just talk about the directives with the restrict of 'E' and have a template which will replace or insert into the directive here.)
That is: How does a directive user(not the directive's writer) style a directive without knowing how it conforms? How could the user ensure that his style do not overwrite the directive's style?
As you know, directive is a reusable component, and much of the times, the user isn't the writer of the directives, he just use it.
Let's say a case here:
a directive written in HTML like this:
<myDirective></myDiective>
my be replaced by the below Emmet expression(or even more complex):
div>h1+ul>li*8>a+img
Here comes the question, how does the user style this myDirective? The user does not know the DOM structure of the directive.
Should he inspect the directive in the devtools when it is replaced by the template and then style the replaced DOM?
Or he should go check the source code of the directive?
If the user style the directive, how should he avoid the overwrite?
Or the directive writer should style the directive using it's namespace?
I think this is a big problem that AngularJS Directive should have to face.
Notice that this is difference with the Shadow DOM or the Web Components because the latter's style can not overwrited by the user, it's in an isolate style scope.
To style an html chunk, whatever code can be, you must see in action at least one time. Grab the markup, and then proceed to style it. You can see the code most of the times in the template property. (Most of the times, some others the markup is a composition).
It would be highly desirable that the markup doesn´t contain specific classes so when you - the user - start styling it, don´t have to face any styling issues.
If you are the directive code owner, then the things should be pretty straightforward. Even more, you can specify an url to the templateUrl property that just contains your html code for that given directive.
I would also encourage you to apply the OOCSS technique for styling reusable objects. And as a suggestion avoid the selectors that you have specified in your post, they don´t perform very well.
Regarding your questions:
1 and 2, yes, they´re valid options.
3 and 4, investigate OOCSS technique, and CSS Specificity concept.
Hope that this helps,
Best Regards.