How do I get auto-complete for angularjs syntax in strings. For example:
myscript.js
var List = function ($scope) {
$scope.names = [
"Ahmed",
"Tom",
"David",
"Jessie"
];
};
HTML
<div>
<label for="get_name">
Find your name:
<input type="search" name="search" id="search" ng-model="search"/>
</label>
</div>
<div ng-controller="List">
<ul>
<li ng-repeat="name in names | filter:search">{{ name }}</li>
</ul>
</div>
<script type="text/javascript" src="angular_1.0.7.js"></script>
<script type="text/javascript" src="myscript.js"></script>
This is basically a way to search to names. How do I get auto-complete to appear inside <li ng-repeat="name in names | filter:search">{{ name }}</li> inside ng-repeat.
I am using PHPStorm 6.0.3.
You can use awesome AngularJS plugin from John Lindquist.
http://plugins.jetbrains.com/plugin/6971
I've finally got it to work by following this tutorial from JetBrains' blog.
Short answer:
You have two options to enable AngularJS autocomplete:
Download angular source code and put the file into a folder inside your project. (it wasn't working form me because I was using it direct from a CDN).
If using a CDN, you must go to Project Settings | JavaScript | Libraries | Download, then select TypeScript community stub from the select box on top left, find angularjs and angular-ui on the list, then Download and install.
Restart IDE. Be happy.
In my case installing angular library didn't work. It was the angular plugin that did the trick. According to this video, install the angular plugin and restart your IDE.
For latest versions, you go to
File -> Settings -> Plugins -> Install JetBrains Plugin -> Search for the plugin, select and install.
Finally, restart your IDE. You can test it by creating a div and typing ng- and you'll see all the suggestions.
Hope this helps.
If you don't already have angular set up, go to Preferences > Project Settings > Javascript > Libraries and add your version of angular.
As for autocomplete in html strings, I don't think that's going to happen with the current version of PHPStorm, but in most other places, it should do the trick.
Related
I'm back on an old AngularJS project (1.7.2) with angular-translate and I'm struggling with ng-bind-html.
In my HTML I wrote this
<span ng-bind-html="'LEFT_PANEL.VISITED_AFTER' | translate"></span>
The result I'm expecting is
<span>Visited <strong>after</strong> this date. </span>
What I have in my translation file is:
"VISITED_AFTER": "Visited <strong>after</strong> this date"
What I actually get is:
<span ng-bind-html="'LEFT_PANEL.VISITED_BEFORE' | translate" class="ng-binding ng-scope">
Visited <strong>before</strong> this date
</span>
What am I doing wrong ?
(yes I have ngSanitize in my modules)
Thanks
NgTranslate is using it's own Sanitizer (Docs)
To change the sanitize strategy globally use $translateProvider.useSanitizeValueStrategy("STRATEGY");
If you only want to have a different strategy for this element use the attribute translate-sanitize-strategy
Possible duplicate of this.
Seems to have to do with HTML decoding.
Add this function:
function decodeHtml(html) {
var txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
And surround what you're printing with: decodeHtml(...)
Actually just look at this plunkr
I am working on an Angular & Bootstrap application. Please suggest me best pagination plugin that i can use.
I have tried like this:
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
but it uses own directive eg. dir-paginate instead of ng-repeat
E.g. <li dir-paginate="item in list.collection | itemsPerPage: 3" pagination-id="list.id">ID: {{ list.id }}, item: {{ item }}</li>
I would suggest you to go with : angular-ui Bootstrap Pagination
The Library is maintained by the core team and it is very stable. Also since you are already using bootstrap so, it will be ideal for you.
I have the HTML below and I am trying to get the Image tag in the field item.Image to render. Does any Angular gurus know why the below doesn't work?
<li ng-repeat="item in results.results" >
<div ng-bind-html-unsafe="item.Image"></div> <!-- item.Image is <a href="image/test.png"/> -->
This may be due to which version of angular you are using.
ngBindHtmlUnsafe was replaced with ngBindHtml in 1.2
https://docs.angularjs.org/guide/migration#ngbindhtmlunsafe-has-been-removed-and-replaced-by-ngbindhtml
Here is a working example with 1.07 using ngBindHtmlUnsafe
And here is a working example with 1.2 using ngBindHtml(Note that ng-sanitize needs to be passed in as a dependency)
I have a Drupal 7 site using ckeditor 4.2. I've created a basic page node and put a span inside an h2 heading in the body. I hard coded it in the html view. It looks fine but if I go back to edit the page, my has gotten stipped out of the html and also any style="" I've put into the html also. I've looked at the ckeditor config and text-formats. I've set the only formats allowed to be text and full html so I'm not using filtered at all. What gives? I've used the editor many times before but probably not this version.
If you are using the CKeditor module then there is an option in Advanced Options that is also mentioned in the module homepage where you should set:
config.allowedContent = true;
None of the above solutions worked for me. What I found was that CKEditor was removing empty <span> tags from the HTML. For example:
<div class="section-heading">
<span class="sep-holder-l"><span class="sep-line"></span></span>
<h4>Section Header</h4>
<span class="sep-holder-r"><span class="sep-line"></span></span>
</div>
Would yield:
<div class="section-heading">
<h4>Section Header</h4>
</div>
However, if I added a non-breaking space in the innermost <span>, CKEditor didn't edit the HTML:
<div class="section-heading">
<span class="sep-holder-l"><span class="sep-line"> </span></span>
<h4>Section Header</h4>
<span class="sep-holder-r"><span class="sep-line"> </span></span>
</div>
Hopefully that helps someone out there!
In Drupal 7 there's no automatic synchronization between CKEditor's filter (called the Advanced Content Filter) and Drupal's filter. As I understand you configured latter one, but not the first one. See config.extraAllowedContent.
CKEditor 4.+ will remove any empty tags it finds which are in CKEDITOR.dtd.$removeEmpty as part of the HTML parsing process.
See this answer for a hack to avoid it.
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.