Assuming i am using this in my controller
var messagesRef = firebase.database().ref().child("messages");
$scope.messages = $firebaseArray(messagesRef);
And in my html is
<li ng-repeat="message in messages">
<p>{{ message.user }}</p>
<p>{{ message.text }}</p>
<button href="{{ message.weblink }}">OPEN THIS LINK</button>
That {{website.weblink}} for example is www.google.com from my firebase database.
How can i make that button work to open www.google.com using that button because it is not working .
To summarize, <a ng-href=""> should be used instead of <button href="">.
Using Angular markup like {{hash}} in an href attribute will make the
link go to the wrong URL if the user clicks it before Angular has a
chance to replace the {{hash}} markup with its value. Until Angular
replaces the markup the link will be broken and will most likely
return a 404 error. The ngHref directive solves this problem. - ngHref
I have an array #sources that contains names (strings) of sources. In a view I want to list every source with a checkbox in a remote form. Then in the linked controller action I would like to have an array in the params hash, containing only those sources, that the user has checked before submitting.
I tried doing that manually, like so:
<%= form_tag select_sources_user_wordsearch_path(#user, #wordsearch), {method: :post, remote: true} do %>
<% #sources.each do |source| %>
<div class="form-group">
<div class="checkbox">
<label class="pull-left">
<input type="checkbox" class="pull-right"> <%=source%>
</label>
</div>
</div>
<% end %>
<div class="form-group">
<%= submit_tag "Start Search",id:"search_commit", class: "btn btn-primary" %>
</div>
<% end %>
But when submitting the form, I don't even see a params hash:
Started POST "/users/1/wordsearches/77/select_sources" for 127.0.0.1 at 2015-08-15 16:18:06 +0200
Processing by WordsearchesController#select_sources as JS
Parameters: {"utf8"=>"✓", "commit"=>"Start Search", "user_id"=>"1", "id"=>"77"}
So I was looking around to see what's going on with the form_tag helper and check_box_tag. And in check_box_tag's API page (see comments) I found that it is possible to pass a collection into it and receive the result of the selection in an array in the params hash. Basically, what I described above.
I am wondering how this would be done inside a form_tag for a remote form, with an array (instead of a collection)?
In the form_tag API page I couldn't find anything about how the data is transferred to the controller. In the check_box_tag there is nothing mentioned about how to handle collections.
Can anyone tell me how this is done "the Rails way"?
It has to be easier than I think..
First question: why don't you use the the form_for helper? Could be something like form_for #wordsearch, url: select_sources_user_wordsearch_path(#user, #wordsearch), {method: :post, remote: true} do.
You may also have a look at the collection_check_boxes helper in the API.
Afaik this can only be used with form_for and the corresponding form object.
<%= form_for #wordsearch do |form| %>
<%= form.collection_check_boxes(:source_ids, #sources, :id, :labeling_method ) %>
<% end %>
Assuming #sources is some kind of an object. In your case
<%= form_for #wordsearch do |form| %>
<%= form.collection_check_boxes(:sources, #sources, :to_s, :to_s ) %>
<% end %>
could work as well. (Did not try it!)
Another way would be to just send the values manually like so:
<% #sources.each do |source| -%>
<%= check_box_tag "wordsearch[sources][]", source -%>
<%= source -%>
<% end -%>
Hope this helps.
So basically what I'm trying to do is to have a layoutView and inside that layoutView have a subview that is wrapped with the layoutView. The catch is that layoutView should also render information from model.
Something like this: http://i.stack.imgur.com/oLODv.png
So far, I didn't have any joy or success in achieving this, because it seems to me that views are somehow unitary and homogeneous, ergo can't be disjoint
For the layoutView I'd have following template:
<div id="someLayoutView">
Hi, <%= userName %>
<div id = "someRegion"></div>
<div>Some other information needed from model: <%= someVariable %></div>
</div>
with #someRegion showing the subView.
Is this possible or is there any similar approach to achieve this kind of nesting/wrapping views?
Having this route in Laravel:
Route::get('post/{id}/comments','PostCommentsController#showComments');
I'am trying to access it from an anchor html tag href attribute in a php view which works with angular to render a list of items. This is a piece of code from this view (_post_content.php):
<ul class="media-list" >
<li class="media" ng-repeat="item in items" >
<div class="media-body">
<div class="row">
<div class="col-sm-9"><h5 class="media-heading">
{{ item.title }} </h5></div>
</div>
</div>
</li>
</ul>
The new view made by the controller PostCommentsController in the method showComments, is similar to _post_content.php but it shows comments by a post id (item.id in ng-repeat).
However, for other links all over the application, even in its main layout: navbars and logo anchors, image anchors, etc; its url's are prepended by the path /post/4/comments.
For example if i click in the item 4 of _post_content.php, a link called blog in the left nav bar in the main layout, shows this as url: /post/4/comments/blog
Of course this route does not exists and breaks all the application.
Please, any clue to solve this strange behavior? Is it possible angular is causing it, though i'm not using angular routes?
Thanks for your help.
If you are using relative paths for your other links, you should prepend them with a forward slash, so instead of:
<a href="blog">
your should have:
<a href="/blog">
That way the links will be relative to the root not to the current path (which in your case is /post/id/comments).
As an alternative you could also use the base meta tag, by including this in your pages' <head>:
<base href="http://yourdomain.com/">
But be aware that there are some side effects to using base which might affect your application. Read this for more info: Is it recommended to use the <base> html tag?.
I'm using an AngularJS-based library called "Ionic" (http://ionicframework.com/).
This seems simple, but it isn't working for me.
In one of my views, I have the following
<view title="content.title">
<content has-header="true" padding="true">
<p>{{ content.description }}</p>
<p><a class="button button-small icon ion-arrow-left-b" href="#/tab/pets"> Back to home</a></p>
</content>
</view>
In the controller for the above view, I have
angular.module('App', []).controller('DetailCtrl', function($scope, $stateParams, MyService) {
MyService.get($stateParams.petId).then(function(content) {
$scope.content = content[0];
console.log($scope.content.title); // this works!
});
});
The data for this view is loaded via a simple HTTP GET service (called MyService).
The problem is that when I view this page,
<view title="content.title">
Doesn't display the title. It's just a blank. According to the Ionic documentation (http://ionicframework.com/docs/angularjs/controllers/view-state/), I think I'm doing the right thing.
It's strange that {{content.description}} part works, but content.title doesn't work?
Also, is it because I'm loading the content dynamically (via HTTP GET)?
By using the ion-nav-title directive (available since Ionic beta 14), the binding seems to work correctly.
Rather than
<ion-view title="{{content.title}}">
....
Do this
<ion-view>
<ion-nav-title>{{content.title}}</ion-nav-title>
...
Works a treat.
A solution for newer versions of Ionic is to use the <ion-nav-title> element rather than the view-title property. Just bind your dynamic title inside the content of the <ion-nav-title> using curly brace syntax. Example:
<ion-view>
<ion-nav-title>
{{myViewTitle}}
</ion-nav-title>
<ion-content>
<!-- content -->
</ion-content>
</ion-view>
Here's a working example of how to accomplish this in Ionic. Open the menu, then click "About". When the "About" page transitions, you will see the title that was resolved.
As Florian noted, you need to use a service and resolve to get the desired effect. You then inject the returned result into the controller. There are some down sides to this. The state provider will not change the route until the promise is resolved. This means there may be a noticeable lag in the time the user tries to change location and the time it actually occurs.
http://plnkr.co/edit/p9b6SWZmBKWYm0FIKsXY?p=preview
If you look at ionic view directive source on github, it's not watching on title attributes which means it won't update your view when you set a new value.
The directive is processed before you receive the answer from server and you fill $scope.content.title.
You should indeed use a promise in your service and call it in a resolver. That or submit a pull request to ionic.
I was encountering the same problem and was able to solve it by wrapping my title in double-curlies.
<ion-view title="{{ page.title }}">
I should note that my page.title is being set statically by my controller rather than from a promise.
I had a very similar issue where the title wouldn't update until i switched pages a couple of times. If i bound the title another place inside the page, it would update right away. I finally found in the ionic docs that parts of those pages are cached. This is described here http://ionicframework.com/docs/api/directive/ionNavView/
To solve my issue, I turned caching off for the view with the dynamic title:
<ion-view cache-view="false" view-title="{{title}}">
...
</ion-view>
I got this to work on older versions of Ionic using the <ion-view title={{myTitle}}> solution (as per plong0's answer).
I had to change to <ion-view view-title= in the more recent versions. However using beta-14 it's showing blank titles again.
The nearest I've got to a solution is to use $ionicNavBarDelegate.title(myTitle) directly from the controller. When I run this it shows the title briefly and a moment later blanks it.
Very frustrating.
It's the first time that I worked with dynamic title in Ionic 1.7 and I run into this problem. So I solved using $ionicNavBarDelegate.title(') from the controller, as mentioned Kevin Gurden. But additionally, I used cache-view="false".
View:
<ion-view cache-view="false"></ion-view>
Controller:
angular
.module('app', [])
.controller('DemoCtrl', DemoCtrl);
DemoCtrl.$inject = ['$ionicNavBarDelegate'];
function DemoCtrl($ionicNavBarDelegate) {
$ionicNavBarDelegate.title('Demo View');
}
Use ion-nav-title instead of the directive view-title.
see http://ionicframework.com/docs/api/directive/ionNavTitle/
This is the true solution: data bind the ion-nav-title directive
<ion-view>
<ion-nav-title ng-bind="content.title"></ion-nav-title>
<ion-content has-header="true" padding="true">
<p>{{ content.description }}</p>
<p><a class="button button-small icon ion-arrow-left-b" href="#/tab/pets"> Back to home</a></p>
</ion-content>
</ion-view>
http://ionicframework.com/docs/api/directive/ionNavTitle/
I m using ionic v1.3.3 with side menus based template. I tried all solutions given above but no luck.
I used the delegate from $ionicNavBarDelegate:
http://ionicframework.com/docs/v1/api/service/$ionicNavBarDelegate/
I created a function inside my angular controller to set the title :
angular.module('app.controllers').controller('contributionsCtrl', contributionsCtrl);
function contributionsCtrl($scope, $ionicNavBarDelegate) {
vm.setNavTitle = setNavTitle;
function setNavTitle() {
var title = "<span class='smc_color'> <i class='icon ion-images'></i> Your Title </span>"
$ionicNavBarDelegate.title(title);
}
}
Then inside my html just called the function vm.setNavTitle
<ion-view overflow-scroll=true ng-init="vm.setNavTitle()">
<ion-content></ion-content>
</ion-view>
<ion-view> <ion-nav-title>{{ result.title }}</ion-nav-title>
This work for me