This is my first meteor app. It's primarily inspired from this blog post. I use ng-switch to display different messages like:
<ng-switch on="message.type">
<!-- Text Widget -->
<div ng-switch-when="text" class="text">
{{ message.text }}
</div>
<!-- Picture Widget -->
<div ng-switch-when="picture" class="picture">
<img ng-click="trackClick($event, message)" ng-src="{{message.picture}}">
</div>
<!-- Dynamic Widget -->
<div ng-switch-when="dynamic" class="dynamic">
<div class="content" ng-click="trackClick($event, message)">{{ message.content }}</div>
</div>
The way this app behaves is as follows:
User enters a text, a meteor collection is updated and the corresponding text widget shows up
A DDP client (in Ruby) listens for any add event in the collection. It updates the collection with a text or image or dynamic content.
The frontend creates a new DOM element and displays the content in that element.
However, I have a special content type called dynamic where I do not want to create a new DOM element (everytime), but rather edit the content of existing DOM element.
The way I think to achieve this is to edit the corresponding Mongo entry without adding a new one. But is there a way I could have this functionality when I have to add a new entry?
Related
I have a page with two tabs and in one of them I have a clickable component that is supposed to change a scope attribute that represents a class. The class content changes is working fine but it is not applying the effect of the class, just when I switch from this tab to another one and come back. Then, when I switch back it applies the CSS class changes.
<!-- Element 1 -->
<div ng-class="{ '{{scopeAttibute}}': true }">
content
</div>
<!-- Element 2 -->
<div ng-click="scopeAttibute=localAttrubute">
content
</div>
I solved it replacing the ng-class for id and the classes for IDs in my CSS style. Like this:
<div id="{{scopeAttibute}}">
content
</div>
<!-- Element 2 -->
<div ng-click="scopeAttibute=localAttrubute">
content
</div>
First you have to set scopeAttribute = true
<!-- Element 1 -->
<div ng-class="{'scopeAttibute': scopeAttibute == true}">
content
</div>
In my Ionic 2 app I have a template with this code:
<div class="body" [innerHTML]="ticket.Body | safeHtml"></div>
The body is HTML that is returned from a remote API. That HTML can contain images. I want to bind a "click" event handler on those images so that I can open them in an InAppBrowser when a user taps on them.
What would be the best way to do that?
Angular 4.1.3, Ionic 3.3.0
Solution 1
Try binding an event on to the parent to capture clicked target elements.
// HTML file
<div class="body" [innerHTML]="ticket.Body | safeHtml" (click)="bodyDivClick($event)" >
</div>
// TS file
bodyDivClick(event) {
// Check if the clicked target is an Image element.
// You can also check by css class name for specific image elements.
if (event.target && event.target.tagName === 'IMG') {
let imageElem = event.target;
console.log('Image clicked');
}
}
Solution 2
You can also try using ngFor to loop your results (images) into view and bind an event on the image itself.
Assuming that ticket is a JSON parsed object retrieved from the remote API.
<div class="body">
<div *ngFor="let imageUrl of ticket.images; let i = index;" class="image-container" >
<img src="{{imageUrl}}" class="image-style" (click)="imageClick()" />
</div>
</div>
Most probably the first solution might work for you if you are not able to change the response of the Remote API from html to JSON/objects (if it's not implemented by you).
I am building a simple React application that implements CRUD operations on the client-side and communicates with a backend via Ajax. I have a container component that has a list component that has many items.
So I have a component with a form to create a new item. I can also write a similar form to edit an item in the list. But I wanted to actually make a modal popup instead of just having a form on the same view. Typically, for instance, with Materialize, you have the following:
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
$(document).ready(function(){
// the "href" attribute of .modal-trigger must
// specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
So I have an edit button in each list item that would actually be the first part of the code above. Now my question is: where should the second part of the code -- the modal itself -- go in the structure of my React components? If I place it in the ListItem component, then every item is going to have a modal. My idea was to place the modal structure in the container component, right after the List component itself. But it does not seem to be working. So where exactly would you place your modal structure if you are using React? Note: I am not using Flux nor Redux, I am just trying to build a simple application using state and props.
// ContainerComponent:
<List>
<NewItemForm>
// I put the modal code inside the EditForm component,
// but it doesn't seem to be trigger from the ListItem edit button :/
<EditForm>
// My ContainerComponent has the following code in componentDidMount:
$('.modal-trigger').leanModal();
I'm trying to build a directive which will display a kendo window with a kendo tab strip in its body content.
It's a component I need to be reusable since I use it a lot in my web app.
Here is the flat html representation that I want to turn into a directive
<div style="padding:20px;" kendo-window="test" id="test" k-title="hello" k-options="popupOptions">
<div kendo-tab-strip k-content-urls="[ null, null]">
<!-- tab list -->
<ul>
<li class="k-state-active">View</li>
<li>Edit</li>
</ul>
<div style="padding: 1em">
This is the view tab
</div>
<div style="padding: 1em">
This is the edit tab
</div>
</div>
</div>
1) First step is creating the directive that wraps the kendo popup and this si where I'm having an issue
So basically, my directive includes the kendo-window widget in its template and has transclude="true", since the content of the popup will different each time.
It seems "transclude" and "scope" cause some issues.
Please have a look : http://plnkr.co/edit/c7qoKlh75s8aS7fazYSo
all:
Is there a way to dynamically add a tag (especially a custom tag) in AngularJS?
I have a custom tag recently created of the type:
<mytag type="small" />
which I am attempting to manage in a larger <div> element. What I would like to do is place, within the div element, a button that, when pressed, causes the creation of a new mytag element within the div.
In other words, given an initial page composition:
<div ng-controller="tagControl">
<div id="tagdiv">
<mytag type="small" />
</div>
<div id="Controls">
<button ng-click="addTag()">Add New Tag</button>
<button ng-click="clearTags()">Clear All Tags</button>
</div>
</div>
I would like to put something in the tagControl's addTag() function that adds a new mytag tag whenever the "Add New Tag" button is pressed, and I'd like to put something in the clearTags() function that removes all added tags when the "Clear All Tags" button is pressed.
Is this possible using AngularJS? If not, can it be accomplished using a third- party library? In either event, how can this be done?
Thanks in advance for any insights...
You need to think in terms of MVC and not DOM manipulation. How many of your <mytag>s you want to show up should be driven by something in your model. And then your HTML would look like this:
<div ng-controller="tagControl">
<div id="tagdiv">
<mytag type="small" ng-repeat="foo in items" />
</div>
<div id="Controls">
<button ng-click="addTag()">Add New Tag</button>
<button ng-click="clearTags()">Clear All Tags</button>
</div>
</div>
Then your addTag() method would just add to the items model and the clearTags() would clear the list. Angular will add the tags for you as you update the model