I have few lines of description on my page. On the page loads I want to show only 150 characters with a link Read More on click of which I want to show the rest of the description and Read Less link. In fact I want to toggle between Read More/Less. I want do this by creating a directive not by using limitTo filter provided by AngularJs. I have gone through the link Create read more link in AngularJS but it did not help me. I don't have code example or jsfiddle because I don't know how to start, I am new to AngularJs. Any help would be appreciated. Thanks in advance.
I've had great success wrapping jQuery dotdotdot with a simple Angular directive. I can't drop in the exact code, but the core of the directive:
Is an A (attribute) directive
Requires ngBindHtml
Has a link function:
Where a $scope.truncated variable is set to keep track of whether dotdotdot has been applied
That watches element.html() for changes, and if it changes and dotdotdot has not been applied, applies it by calling element.dotdotdot() and flips the truncated flag
Related
I want to do a similar thing done here https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible2&stacked=h with a small change using angular js.
Let's say I have a variable test, Now my href(Simple collapsible) will display only when the test has some string otherwise no href displayed.
I tried below condition in my angular template:
Simple collapsible
[[test]]
Note: I am actually having a condition like this https://django-angular.readthedocs.io/en/latest/template-sharing.html but it doesn't include how to collapse ng-href.
Any help would be really appreciated.
Help me, please.
I have some JS code, that allow work with LEAFLET map.
https://gist.github.com/russtanevich/140235d5456c3215df6ac8b788485ad0
The APP allow to add on map new adverts and when we click on marker - we see information about advert.
We can choose some category or contain some works in text of advert as filter. All filters works through ajax request (lines 51-81). Various ajax requests for various type of filter.
After AJAX request we change $scope.mapMarkers (line 13, 54, 61 etc.). OK.
mapMarkers is variable that contain array of marker objects (as line 86). okey. marker object has a popup message (as we can see on the picture). This message is angular directive (line 96, line 5).
Markers that we get after the first load application have a good popup message (angular directive initiate).
Markers that we get after filter AJAX request - also have popup message as angular directive. But it is logically - they don't show. We have empty popup message, because angular directive doesn't initiate in this occasion.
I hope, we understood me. Maybe I explained bad way.
What is my mistake? Architecture? Or maybe is there solution?
Thank you very much! Have a nice day! Best regards!
Ok so i havent look at the module 'leaflet-directive' but this is how I handled it on a similar app. I created a directive
app.directive('theDirective', function($compile, $timeout){
return {
restrict:'E',
templateUrl: 'template.html'
};
});
in my case im using templateUrl which im initiating elsewhere with <script> like tags that part will resemble what you tried to do in geodataToMarkers only that the way you wrote the template will not work because angular cant tell its a template.
Now when you add a marker you need to populate your template with stuff in your model meaning you got to tie them together. you can do that
by injecting the $compile to a method and tie both things together
$compile(domElem)($scope);
That will fill your directive with the model. note that you should pass domHtml the directive not the html meaning <the-directive></the-directive>
It is kind of hard to explain with your code because you are mixing jquery and angular a whole lot and you have to change many things. but to be clear on a possible quick solution
on the marker you have to put a div with an id='yourmarker' when you want to put stuff together, just look for the the element with that id
var domElem = document.getElementById(markerPointerId);
domElem.innerHTML = '<the-directive></the-directive>';
insert your directive. and compile it
$compile(domElem)($scope);
you should see you marker populated with the scope you have put in.
This by al means aint the Angular way. im just giving you a solution that i know works
Hope it helps.
I am a beginner in angularJS, and do not write good English.
I have the following code
<span class="custom-marker-price" ng-bind="property.rentValue"></span>
How can I hide the element span (IMG1) when load angular...
Well, if im correct you should use ng-hide property.
Inside of span after class add ng-hide='hideIt'
and inside of controller at first line put:
$scope.hideIt=false;
And when you want to hide it just put boolean variable in true:
$scope.hideIt = true;
You could also use ngif property.
Hope this help!
ngCloak
directive in module ng
The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
— AngularJS ng-cloak Directive API Reference
I have a web application thats written mostly in Jquery, that is essentially a dashboard that a user can add any number of custom widgets to. I have the users currently added widgets, so when its loaded up I masically append each widget to the DOM. I want to work on converting this to an Angular application however im stumbling on one major issue.
1)I can recreate each widget as a directive, that will work nicely. However what I'm struggling with is how to add each widget that a user has setup on load. My first attempt at solving this was to create a generic widget directive, and doing an ng-repeat, and dynamically assigning the widget its controller/templateUrl.
In theory this seems great however I ran into some issues with not being able to dynamically pass the controller name via attribute. if I hard coded a string value it would work, but wouldnt a data-bound attribute in the ng-repeat. Example below does not work.
<quidget ng-dynamic-controller="quidget.QuidgetName" ng-repeat="quidget in tab.quidgets track by $index"></quidget>
if instead of quidget.QuidgetName I passed in the actual name of the controller, it would work...like so
<quidget ng-dynamic-controller="quidget1Controller" ng-repeat="quidget in tab.quidgets track by $index"></quidget>
Does anyone have any insight on how I can go about accomplishing this?
Instead of passing the controller name dynamically to the directive you can define the name of the controller in the template of that widget (this is assuming that every widget has a different template). For example you just pass the widget name to the controller:
<quidget ng-repeat="quidget in quidgets" name="quidget.name">
Next, in your quidget directive's template you conditionally load the template based on the name of the widget, some thing like this:
<div ng-switch on="name">
<div ng-switch-when="widget1" >
<ng-include src="'widget1.html'"></ng-include>
</div>
<div ng-switch-when="widget2" >
<ng-include src="'widget2.html'"></ng-include>
</div>
</div>
and inside each widget's template you define the Controller name like this:
<p ng-controller="widget1Ctrl">This is widget1.</p>
Here is a working plunker that illustrates the whole idea: http://plnkr.co/edit/dBqHRqChy17U8pFI9PXH
I know it's kind of a messy solution and I am pretty sure this can be accomplished in a much simpler manner.
I'm trying to implement a few angular UI components into my simple angularjs application. When elements from the directives are entering the DOM they are shifting elements that are already there rather than popping over them. It seems that any directive that is meant to appear overtop of other elements are being displayed this way.
I'm a relatively new developer and there is a decent chance that I'm missing something easy and completely obvious. Any guidance is welcome.
I'm using angular 1.1.5 and ui-bootstrap 0.6.0 (with templates included).
Below are some screenshots to give you a better idea of what I'm talking about.
Datepicker directive as it appears before opening:
Datepicker after opening:
What it is suppose to look like upon opening(Link to plunker):
This example is from the tooltip directive which shows the same issue ("on the right" is meant to appear to the right of the text):
Last example using typeahead (names are meant to appear in a dropdown list):
As mentioned earlier, any help or guidance is welcome- I would really like to get these working and have run dry for way to troubleshoot. Thanks!