I've been scratching my head for some time over this puzzle. I've been trying to load an external file into an ng-view (no problems here). And in that partial file I have text that get swapped for an input field when you click "Edit title", but this only works when all code is included in the same file.
If you take a look at this Plunker http://plnkr.co/edit/cgUGOKVzWKNWugqrFCbJ you'll see what I mean.
I would appreciate if you could point me in a direction that could solve this issue for me.
Thanks!
The "#" in the hrefs are probably making angular render the html and the controller again.
Change them as below and it should work:
Edit title
Related
I am using ng-repeat to display a list. In my data there is a field which contains Url that I need to be displayed as a link in my html page. Please see below screen shots:
My Html:
My rendered page:
I have added angular-sanitize.js script in my page and added dependency for 'ngSanitize' in my main module. But I can't find why the ng-bind-html only showing text without link? Helps are much appreciated.
Suggestion 1 Outcome:
and updated code:
You have to use a hyperlink (<a>)
The best thing is start from the begining.. so :
At project im working on (AngularJS) I'm using CKEditor as wysiwyg editor. Everything was working very good till I wanted to add codesnippet functionallity.
CKE produces pure html code, which I can bind to a model to see in real time what's happening. On my side I've been using ng-bind-html to see the results and it worked well. Every basic-html code was working, bold, italic, headings.. fonts, size etc.
When CodeSnippet plugin (http://ckeditor.com/addon/codesnippet) went in...
It stopped working (I mean the codesnippet part).
Example of not-working HTML(btw CKE produces code with ‚< and > instead of normal tags < and >.. so I have to replace them… but nevermind its not an issue :) ).
Example of snippet (which doesnt work on ng-bind side):
<code class="language- html"><html><body>Test</body></html></code>
The problem is that inside editor everything works good, but outside (when binded to ng-bind-html directive), its not.
What Ive tried so far:
- I included CSS files which CKE editor uses inside.. worthless.
- code snippet plugin uses highlight.js so I tried to transform CKE html code into highlight.js one.. and it worked!
example:
<div compile="true" hljs language="css”>whatever</div>
But the problem is CKE editor produces complex text (including code snippets, other stuff, quotes etc..). So If i put all of this into HLJS directive.. it highlights everything. Its not what I wanted to achieve.
My solution to this problem was adding dynamically directives with HLJS + normal html code. Result example:
(hljs directive its angular directive for hightlight.js) :
<div id="hl" compile="true" hljs language="css">example</div>
<p><strong>Damn</strong></p>
<div id="hl" compile="true" hljs language="cpp">Other snippet</div>
To make it work I had to recompile whole code I’ve added.. So I’ve put it into directive which has watch and recompiles code once its updated.
And.. It worked!! but… and here comes the real problem:
*it only works for HTML-valid code snippets because $compile somehow validates all this stuff inside… whats happening? '<' tag is transformed into '& lt;' … If I open some HTML tag.. its immediatly closes it.. (if I 'forgot' about it) and many other weird and unacceptable stuff.
Do you have any idea?
I've tried to explain the issue as clear as possible but if you have any further questions..
ng-view html showing as plain string. how can I fix it?
Error screenshot.
https://www.evernote.com/shard/s179/sh/b7cf9275-7d18-4b5d-8599-a4b7ec5c3bbc/c9ec67b08744057a3a78ab4f20dd97aa
Sorry, i can not upload images.
Looks like you're trying to use ng-view to load jade/haml? You'll need to have that compile to html before angular will be able to use it as a view.
I'm here for a little question about angularJS...
Currently at work we are working on an app that need an "overlay" admin style panel.
Lets take this exemple :
http://olivierbossel.com/others/angularJS-overlay.jpg
In the first part, the url is "myapp.com/#/works". To display this I have currently configured my $routeProvider.when('/works', { templateUrl: ... etc... And I have in my template the ng-view directive that handle the load and the display of the template. Ok for this part...
My question is :
How to display a content in another part of the page like in the second part of the picture where the url is "myapp.com/#/admin" ?
In this case, the admin template has to be displayed in an overlay style element...
Hope somebody has an answer for me, that will be extremely helpfull...
Thanks in advance !
See you !
Best regard
Olivier
Take a look at http://angular-ui.github.com/#directives-modal. It basically shows/hides the modal depending on an ng-model variable.
Edit: Here's an example doing what you want: Open a modal on the same page depending on the routeParams: http://plnkr.co/edit/DOPmBT?p=preview
I am calling the twitter widget from a file twitter_widget.js using this code:
=javascript_include_tag "twitter_widget"
In a view of a controller written in haml.
Everything is functioning but all the URLs are rendering with the contents of the href in parenthesis as can be seen in this screenshot:
http://i.stack.imgur.com/ELDrh.png
I've googled around, and I'm new to rails, so any help is greatly appreciated.
The problem was definitely bluprint.css. Once I disabled blueprint view rendered as expected.