Am i creating multiple html pages, where index.html consist of the bootstrap carousel which slided through some couple of images and am i connecting all the html pages through ngroute,The problem is when loading the carousel in index.html if click the next or prev button in the carousel it just navigating to the another html page or it's same page,i hereby paste a working plunker link for reference:
Please help me to resolve this issues.
Am i creating multiple html pages, where index.html consist of the bootstrap carousel which slided through some couple of images and am i connecting all the html pages through ngroute,The problem is when loading the carousel in index.html if click the next or prev button in the carousel it just navigating to the another html page or it's same page,i hereby paste a working plunker link for reference: http://plnkr.co/edit/VUS8RjQkVQabEBxRWMdB?p=info Please help me to resolve this issues.
just use this in your main controller
$scope.$on('$routeChangeSuccess', function () {
$scope.isIndexPage = $location.path() === '/';
});
Related
I started working with React about 6 months ago and I have one website in html and one application in react. Now I want to make together and run on react default port. when react start I want to open website and then click on one link in website open the react app.
I am trying many ways but unable to figured out solutions.
Somebody could tell me any way to do this?
Try this, worked for me.
Let's consider home.html as Static HTML Page (not reactjs) and index.htmlas ReactJS APP.
On Link/Login press from home.html, I want to render reactjs app.
Link to URL /#/login (login button on home.html) as I'm using HashRouter (react-router v3).
<li>
<a class="page-scroll" href="/#/login">Login</a>
</li>
Now in index.html in public folder of Reactjs. Indicated that if URL is just / render home.html.
<script>
var url = window.location.href;
if (!url.replace(/.*#\//, '')) {
location.href = 'home.html'
}
</script>
I put both index.html and home.html inside same directory/.
I can't able to load bootstrap tagsinput inside the bootstrap modal popup,
however its working fine on the normal page.
I am using this code inside a modal controller also i am using $modal.open to open modal:
$('#insidetags').tagsinput('add', 'some,tag,inside');
I have created jsfiddle link for that, please check them out.
I am trying to make Theater.JS work with Angular application.
If Div in which TheaterJS is supposed to insert dynamically typed contents is on the index page, it works perfectly fine.
But if I keep the same div on the page which is loaded using ui-view (or using ng-view for that matter), TheaterJs throws following exception
Uncaught TypeError: Cannot set property 'innerHTML' of null
I understand its happening because TheaterJs is loaded before main.html page is loaded through ui-view. But I am not sure how to handle this scenario.
Here is the plnkr demo with the example. The TheaterJS works when div is on index page but fails to work when the div is on main.html which is loaded dynamically using ui-view.
In my project, I want to use TheaterJS on a page loaded using ui-view.
By placing the script include into the <head> and moving the call to new TheaterJS() into a directive, you are able to use it in your partials.
Here is a plunker showing your working template:
http://plnkr.co/edit/JAbSmNOAZtUMkc976sh8?p=preview
Directive:
app.directive("theaterDirective", function() {
return {
link: function () {
var theater = new TheaterJS();
theater.describe("text", {speed: .7, accuracy: .7}, "#text");
theater.write("text:It now works in template partials", 600);
theater.write("text:It is no longer restricted to the Index page", 600);
theater.write(function () { theater.play(true); });
}
}
})
HTML partial:
<h1>This is main.html page content</h1>
<h1 theater-directive id="text"><noscript></noscript></h1>
PLUNKER
I'm developing an AngularJS SPA, using ng-route and ng-animate. I'm trying to display the Bootstrap Carousel on the index.html#/ using ng-show. Very simple task.
I want the Carousel to show on the index page, but not on the about page or the contact page.
I'm trying to do the logic in my indexController like so:
if ($location.path() == "/") {
$scope.isIndexPage = true;
}
And in my HTML:
<div id="myCarousel" class="carousel slide" data-ride="carousel" ng-show="isIndexPage">
But it does not work as expected: the Carousel does not display. Once the ng-show attribute is removed, the carousel displays, but on all pages.
How can I get the Carousel to display only on the index page? I've tried variations such as ng-include-ing and ng-ifing carousel.htm. Numerous Google searches such as "AngularJS SPA and Bootstrap Carousel" reveal unanswered SO questions.
Thanks in advance for any input. Here's the PLUNKER.
It's a bit strange not to put something that is specific to the home page into the template of the home page, but anyway...
Your code has 2 main problems:
you're trying to access a variable from the indexController scope from a part of the page that is not controlled by this controller. The controller only controls its view. The $scope of the controller is limited to its view.
You're initializing the isIndexPage variable only once. It never changes after.
Solution:
create a controller for the whole body of the page, and put the logic used to control the visibility of the carousel in that controller
use a function that will return true or false based on the current location
See http://plnkr.co/edit/8luxeIbyIPEKy0LkemM0?p=preview for a fork of your plunker (the additional JS code is at the end of script.js):
appname.controller('MainCtrl', function($scope, $location) {
$scope.isIndexPage = function() {
return $location.path() === '/';
}
});
and in the index.html file:
<body ng-controller="MainCtrl">
<div ng-show="isIndexPage()" ...>
i'm working with Ionic Framework and i've the next problem.
I have 3 views templates: one.html, two.html, three.html, and one.html is the home of the application (no back button)
The navigation is correct between the views but i have problems if navigate from three.html to one.html because when navigate to one.html in navbar appears the back button and i need one.html identical as app start state
I navigate with $state.go('tab.one.html');
Thanks.
You could use the nav-clear directive to do this (source)
or implement the code directly in your controller:
$ionicViewService.nextViewOptions({
disableAnimate: true,
disableBack: true
});