I'm using the angular-rails-templates plugin to preload html files in the assets/javascript/templates (sprocket fix is not working)
When I use the inspector, I can see that the CacheTemplate is being triggered:
// Angular Rails Template // source: app/assets/javascripts/templates/bannertime.html angular.module("templates").run(["$templateCache", function($templateCache) { $templateCache.put("bannertime.html", '<section id="landing-page-banner">') }]);
My app.js
app = angular.module('logged_out', ['templates', 'ng'])
app.controller "logged_out", ($scope) ->
$scope.banana = "hello banana face"
My index.html.erb
<div ng-app="logged_out" ng-controller="logged_out">
<div class="container-fluid">
<div ng-include="bannertime.html"></div>
</div>
</div>
Can someone please explain to me why ng-include is impossible to make work? I've been working on this for 3 days now.
Damn you world!
ng-include requires two different quotes ?!?!?!?!
Once I changed <div ng-include="bannertime.html"> to <div ng-include=" 'bannertime.html' "> everything worked.
Goddddd damnt
Related
I have the following code which loops through a list of countries and creates a href links
<div class="container" th:each="country: ${countryList}">
<a th:href="${country.countryAbbr}"><div clss="row" th:text="${country.country}"></div></a>
</div>
The current page url is "localhost:8080/directory", and the generated url is showing as
"localhost:8080/us"
How can I make the url show as "localhost:8080/directory/us"
I want "us" to be added to the current url of the page.
Try create the following code in your Controller class.
#RequestMapping(value="/", method=RequestMethod.GET)
public String rootGet() {
return "redirect:/directory";
}
You can use ServletUriComponentsBuilder:
<div th:with="urlBuilder=${T(org.springframework.web.servlet.support.ServletUriComponentsBuilder)}"
class="container" th:each="country: ${countryList}">
<a th:href="${urlBuilder.fromCurrentRequest().path(${country.countryAbbr}).toUriString()}">
<div clss="row" th:text="${country.country}"></div>
</a>
</div>
Give a try to this one
<div class="container" th:each="country: ${countryList}">
<a th:href="#{${country.countryAbbr}}"><div clss="row" th:text="${country.country}"></div></a>
</div>
Using # usually resolves the default context but I am not aware of your environment.
For example, if you had Tomcat .war file, and your application would be hosted at localhost:8080/myApp, you would want result /myApp/us rather then /us. # would do that trick.
If above is not relevant for you, use this one:
<div class="container" th:each="country: ${countryList}">
<a th:href="#{'/directory/' + ${country.countryAbbr}}"><div clss="row" th:text="${country.country}"></div></a>
</div>
I'm trying to add Turbolinks to my Rails 6 app (I'm late to the party) and I'm having display issues with TailwindCSS & Mapbox GL JS.
If I start my journey on the page with the map (new tab or refresh the page), then everything works as expected for the duration of my visits (I can leave and return to the page with the map repeatedly & each time everything works as expected). I can even visit pages with other instances of Mapbox on it & those display properly (I'm slowly transitioning from isolated script tags on each page into StimulusJS in a way that leaves me with sevaral Mapbox-providing controllers e.g. mapcity_controller & mapstreet_controller - I don't think this is part of the problem, but I don't want to leave anything to chance).
However, if I start my journey on a different page that does not have a map (new tab or refresh the page), then navigate to a page with Mapbox on it, the fixed and w-* styles don't work. If I scroll the page, the map flows up with the content & the map doesn't fill up the entire w-2/3 space that it should.
<div data-controller="mapbox" class="flex flex-col-reverse flex-wrap mt-10 md:flex-row">
<div class="h-full p-2 mt-64 overflow-scroll md:mt-0 lg:mt-0 md:w-1/2 lg:w-1/3">
CONTENT
</div>
<div class="md:w-1/2 lg:w-2/3">
<div id="map" class="fixed w-full h-64 md:w-1/2 lg:w-2/3 md:bottom-0 md:right-0 md:h-full"></div>
</div>
</div>
I thought it might have been the parent md:w-1/2 lg:w-2/3 container div, but removing that does not change behavior at all:
<div data-controller="mapbox" class="flex flex-col-reverse flex-wrap mt-10 md:flex-row">
<div class="h-full p-2 mt-64 overflow-scroll md:mt-0 lg:mt-0 md:w-1/2 lg:w-1/3">
CONTENT
</div>
<div id="map" class="fixed w-full h-64 md:w-1/2 lg:w-2/3 md:bottom-0 md:right-0 md:h-full"></div>
</div>
If I remove Mapbox from the equation, everything works as expected in either visiting scenario (I always have a full width, non-scrolling right pane regardless of whether or not the page is my first visit):
<div class="flex flex-col-reverse flex-wrap mt-10 md:flex-row">
<div class="h-full p-2 mt-64 overflow-scroll md:mt-0 lg:mt-0 md:w-1/2 lg:w-1/3">
LOTS OF MULTI-LINE CONTENT TO CAUSE SCROLLING
</div>
<div class="fixed w-full h-64 bg-blue-300 md:w-1/2 lg:w-2/3 md:bottom-0 md:right-0 md:h-full">OTHER CONTENT</div>
</div>
I'm guessing that something about my StimulusJS controller isn't working with Turbolinks properly. I've removed all of my extra code (setting zoom levels, adding sources & layers, etc), and the issue persists. I've tried using connect as well as initialize, with the same results.
import { Controller } from 'stimulus'
import mapboxgl from 'mapbox-gl'
export default class extends Controller {
connect () {
mapboxgl.accessToken = "my-access-token"
this.map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-streets-v11',
center: [0,0],
zoom: 2,
minZoom: 1
})
}
disconnect () {
this.map.remove()
this.map = undefined
}
}
Just in case, here is my index.js file:
import { Application } from 'stimulus'
import { definitionsFromContext } from 'stimulus/webpack-helpers'
const application = Application.start()
const context = require.context('controllers', true, /_controller\.js$/)
application.load(definitionsFromContext(context))
Here's my packs/application.js file:
require('#rails/ujs').start()
require('turbolinks').start()
require('stylesheets/application.scss')
require('stylesheets/custom.scss')
require('src')
import 'controllers'
The application.scss file contains:
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
None of the custom styles in custom.scss apply to the map or its container divs.
deep breath
ok 😅 this is really embarrassing 😬
When I originally implemented this site, I took the approach of a <%= yield :styles %> in the head and a <%= yield :scripts %> at the bottom of the page with <% content_for(:scripts) do %> blocks wherever I wanted javascript.
Narrator's Voice: He should not have done this.
<% content_for(:styles) do %>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<% end %>
If I remove my :styles block & put the stylesheet tag directly in the head, everything works as expected.
Feels like a dumb question but I do not get it. How can I do fast string concatenation in Angular 2 Dart templates?
I have a seperate html file for my component lets say my_component.html:
Works:
....
<div id="abc">
{{order.pickupPlace.email}}
</div>
...
Works:
....
<div id="abc">
{{ ((order.pickupPlace.state) ? order.pickupPlace.state+" ":'')}}
</div>
...
Does not work:
....
<div id="abc">
{{"<br/>"+order.pickupPlace.email}}
</div>
...
Does not work:
....
<div id="abc">
{{order.pickupPlace.name+" "+order.pickupPlace.email}}
</div>
...
Have tried to find an answer in the docs here (https://webdev.dartlang.org/angular/guide/template-syntax#!#expression-operators) but no luck.
Of course I could use *ngIf on every element which I output conditionally but is there a way for simple string concatenation?
The best way is to declare a getter inside your Component controller that does the concatenation for you, you will get dart syntax support and the html template will looks cleaner.
String get myConcatenation => "${order.pickupPlace.name}${order.pickupPlace.email}";
<div id="abc">
{{myConcatenation}}
</div>
The last two examples can be made to work easily:
<div id="abc">
<br/>{{order.pickupPlace.email}}
</div>
And:
<div id="abc">
{{order.pickupPlace.name}} {{order.pickupPlace.email}}
</div>
Angular handles this pretty well. If you need some more complicated logic you can move it to the Dart code (but you cannot use HTML there easily).
If you find creating lot of weird logic consider creating more smaller components that can handle this for you.
I've created a new asp.net MVC app in VS.NET 2013. In _Layout.cshtml, I have a reference to the angularjs library (Google developer site). I also define a controller called "con1" and create a variable.
_Layout.cshtml:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script type="text/javascript">
function con1($scope) {
$scope.somestring = "some string";
}
</script>
Index.cshtml:
<div>
{{1+1}}
</div>
The above works fine and renders the result of "2".
When I change the div to the following and start trying to access the somestring variable in the controller, I get the actual AnguarJS code rather than the result.
<div ng-controller="con1">
{{1+1}}
</div>
Output: "{{1+1}}"
Any idea why adding the controller reference breaks it? This seems to be VS.NET specific. I have a jsfiddle here that works fine: http://jsfiddle.net/jpswdzxu/. That is basically the output from the VS.NET project.
You need to define the Angular Application, or it won't work:
<script type="text/javascript">
var myApp = angular.module('myApp',[])
.controller('myAppCtrl', function($scope) {
$scope.somestring = 'teststring';
});
</script>
Then, the HTML should be:
<body ng-app="myApp">
<div ng-controller="myAppCtrl">
{{somestring}}
</div>
</body>
Or, using your jsfiddle, it would be:
<div ng-app="myApp" ng-controller="myAppController">
{{1+1}}
<br>
{{somestring}}
</div>
and:
angular.module('myApp',[])
.controller('myAppController', function ($scope) {
$scope.somestring = "some string";
});
Good Luck!
I have the following code:
{#data.merchantModel}
<div class="address">
{#content $key="content:combinedAddr" merchantAddress1="{merchantAddress1}" merchantAddress2="{merchantAddress2}"/}
</div>
{:else}
<div class="address">{merchantAddress1}</div>
more code...
{/data.merchantModle}
I'm working with Webcore/NodeApp but everything after the {:else} doesn't get rendered. If I comment it out everything is fine. Not sure why webcore doesn't like the {:else} but was wondering if there's another way to write the above code?
Still trying to wrap my head around dust.
Looks like you need to close your content tag and model is misspelled on the closing tag:
{#data.merchantModel}
<div class="address">
{#content $key="content:combinedAddr" merchantAddress1="{merchantAddress1}" merchantAddress2="{merchantAddress2}"/}
</div>
{:else}
<div class="address">{merchantAddress1}</div>
more code...
{/content}
{/data.merchantModel}