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>
Related
I'm using Datatables with AngularJS and the FixedHeader plugin which works fine when the table is displayed on the page. My issue is that when I navigate to a different page (single page application) using angular UI router, the FixedHeader header still shows.
Does anybody know why this is the case?
It looks like that is an issue with the FixedHeader plugin to DataTables.
There is an angular-DataTables module at https://l-lin.github.io/angular-datatables/#/welcome, which has a page about the plugins that work with it. This page lists the FixedHeader plugin and mentions the same issue you are seeing.
See https://l-lin.github.io/angular-datatables/#/withFixedHeader.
This page says the following:
Beware when using routers. It seems that the header and footer stay in
your DOM even when you change your application state. So you will need
to tweak your code to remove them when exiting the state.
It also shows a workaround for angular-ui-router:
$stateProvider.state("contacts", {
templateUrl: 'somewhereInDaSpace',
controller: function($scope, title){
// Do your stuff
},
onEnter: function(title){
// Do your stuff
},
onExit: function(){
// Remove the DataTables FixedHeader plugin's headers and footers
var fixedHeaderEle = document.getElementsByClassName('fixedHeader');
angular.element(fixedHeaderEle).remove();
var fixedFooterEle = document.getElementsByClassName('fixedFooter');
angular.element(fixedFooterEle).remove();
}
});
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() === '/';
});
I am using Angular 1.3, creating views using ui-router and ui-view.
I have added the ui-view on index.html file, which has Menu, footer and in the middle ui-view for main content.
I have created whole application using states with $stateProvider.state('state_name')
Now I want to create a page with plain text, no html tags, just plaintext. But the problem is when I create route for that, it includes header and footer, which is correct behavior of Angular. But how can I create a view with no menu, footer included, just plain text which I will add in view file, with route. Any solution?
You can have a service that changes is bond to the main controller. The first answer to this question explains how this can be achived.
I've made a modified Plnkr example for your specific use case here
app.factory('Page', function(){
var visible = true;
return {
visible: function() { return visible; },
setVisible: function(state) { visible = state}
};
});
The factory called Page provides access to a visible variable for both the main controllers and the controllers inside the ng-views.
The aim is to change this visible variable in the controller in order to change the visibility of the main components outside of the ng-view.
function MainCtrl($scope, Page) {
$scope.Page = Page;
}
To this end we have a binding in the main controller that can access the page service.
<html ng-app="myApp" ng-controller="MainCtrl">
<body>
<h1 ng-hide="Page.visible()">Page Header</h1>
<ul>
<li>test1
<li>test2
</ul>
</html>
And in the html, we define that the ng-if is controlled by this visible variable in the MainContorllers Page.
function Test1Ctrl($scope, Page) {
Page.setVisible(false);
}
Finally, we can call the change visibility function from the other views in order to change the visibility of the headers and footers in the Main View.
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()" ...>
Hello im working on a web app project, and we are using jquery mobile for the pages ui and angular for mvc reasons,
Im having a problem using my external pages ( pages that ive load to my index.html), they dont recognize my controllers (only works the controllers that ive put in the index.html)
ill some of my code here to explain my problem
if ive put some angular values in my external page (previews declaration of the controller in my
<div data-role="page" id="ResEjecSuc" class=".paginas"
data-dom-cache="true" ng-controlles="categController" >
)
<span ng-class="sucursal.TIT_CATEGORIZACION">
{{sucursal.TIT_REALIZADA}}</span>
my app only shows: {{sucursal.TIT_REALIZADA}}
my controller init code :
app = angular.module('nevadaProt', [])
app.controller('categController', controlerCateg)
controlerCateg = function($scope, $locale) {
var sucursal = {
TIT_CATEGORIZACION:4,
TIT_REALIZADA:12
}
how ive load and after that transition to my html page:
Load:
$.mobile.pageContainer.pagecontainer("load",
"pages/RappidApps2/ResumenEjecZona.html", {});
transition:
$.mobile.pageContainer.pagecontainer("change", "#ResEjecSuc", {
transition : "pop",
reverse : false
});
how can i make work angular controllers and external jquery mobile pages?
Once you are using Angular, you may create a directive.
app.directive('externalHtml', function(){
return {
restrict : 'E'
,replace : true
,templateUrl : 'pages/RappidApps2/ResumenEjecZona.html'
};
});
then, you html should be something like:
<body>
<div data-role="content">
<external-html/>
</div>
</body>
It always works for me.