i'm creating a angular app, and have an strange issue.
This is my controller:
angular.module('clientApp')
.controller('AdminCtrl', function ($scope) {
});
This is my view:
<div class="admin" ng-controller="AdminCtrl">
<div ng-include="'/views/partials/header-admin.html'"></div>
<p>This is the admin view.</p>
</div>
the thing is when i run the app the ng-include appears comment out:
<!-- ngInclude: '/views/partials/header-admin.html' -->
but if i remove the ng-controller of my view it renders the ng-include without problems:
<div class="admin" >
<div ng-include="'/views/partials/header-admin.html'"></div>
<p>This is the admin view.</p>
</div>
html:
<div ng-include="'/views/partials/header-admin.html'" class="ng-scope"><header class="ng-scope">
<div class="logo">
<div class="user-preferences"></div>
</div></header>
<nav class="left-nav ng-scope">
<ul>
<li>
Dashboard
</li>
<li>
Temas (Materias)
</li>
<li>
Sitios
</li>
<li>
Grupos
</li><!--
<li>
Dashboard
</li> -->
</ul>
</nav></div>
First of all, you have an error in your partial view code. You can't have a ng-include pointing to the same file:
<div ng-include="'/views/partials/header-admin.html'" class="ng-scope"><header class="ng-scope">
if you do that you have to recive some error like:
because you create a infinite bucle with the includes files, so the first thing that you have to do is remove the include in your partial file. I think this should not have any more problem!
Related
I am using bootstrap with angularjs mainly because I want to user partials with my navbar
I have taken this template and added angularJS
http://ironsummitmedia.github.io/startbootstrap-landing-page/
Here is the navbar
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Inicio
</li>
<li>
Servicios
</li>
<li>
Contactenos
</li>
</ul>
</div>
And below that are the divs with the content of the navbar options
<a name="services"></a>
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Death to the Stock Photo:<br>Special Thanks</h2>
<p class="lead">A special thanks to <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a> for providing the photographs that you see in this template. Visit their website to become a member.</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-responsive" src="img/ipad.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
When I click on the Servicios (#services) is taking me to
http://localhost:8080/index.html#/services
instead of taking me to
http://localhost:8080/index.html#services
a / was added between # and services
I have nodejs installed and running http-server (npm pakckage) for testing purposes
I found the solution
When creating the links use two ## and the target="_self"
Question 1
Question 2
Question 3
And use the id attribute in your html elements like this:
<div id="faq-1">Section 1</div>
<div id="faq-2">Section 2 Content></div>
<div id="faq-3">Question 3</div>
There is no need to change any routing or anything else
I am trying to do the following:
I have a json array of questions which I pass like this:
<a href=""
...
title="Questions"
data-content="{{item.questions}}"
data-template="popover.question.tpl.html"
...
bs-popover>
{{item.questions.length}}
</a>
and a template 'popover.question.tpl.html' that contains the following code:
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<div class="popover-content" ng-model="content">
<ul>
<li class="animate-repeat" ng-repeat="question in content">
{{question.text}}
</li>
</ul>
</div>
</div>
The problem is probably that the content is passed as a string by the directive, leading in the ng-repeat not working. If I just evaluate "{{content}}" I get the actual json data in my div but obviously I can't work with that. Any ideas on how to do that? Do I have to create a separate controller for that (which I would like to avoid)?
data-content will accept only string. So object cannot be passed through that.
Angular-strap popover will inherit the scope from where it is getting opened.
So, in your popover.question.tpl.html you can directly access item.questions.
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<div class="popover-content" ng-model="content">
<ul>
<li class="animate-repeat" ng-repeat="question in item.questions">
{{question.text}}
</li>
</ul>
</div>
</div>
Check this plunker for working example.
Is there a more concise/pragmatic way to create tabbed widgets with angular that doesn't include ui.bootstrap? The tab module is fantastic but i'm trying to create a lean site built with stylus and I find that ui.bootstrap is rather complex and very intertwined with the Twitter bootstrap css. I dont have much experience with building directives, but would that be the best approach? After mixing a few examples that I found, this is what I came up with...
<div ng-app="app">
<div class="container" ng-init="selectTab='tab1'" ng-switch>
<ul class="tab-header">
<li ng-class="{active: selectTab=='tab1'}" ng-click="selectTab='tab1'">tab1</li>
<li ng-class="{active: selectTab=='tab2'}" ng-click="selectTab='tab2'">tab2</li>
<li ng-class="{active: selectTab=='tab3'}" ng-click="selectTab='tab3'">tab3</li>
</ul>
<div ng-switch on="selectTab">
<div class="tab-content" ng-switch-when="tab1">tab1 contents</div>
<div class="tab-content" ng-switch-when="tab2">tab2 contents</div>
<div class="tab-content" ng-switch-when="tab3">tab3 contents</div>
</div>
</div>
</div>
Codepen Example
I'm having trouble with a simple Jquerymobile navigation setup.
I have 3 HTML/PHP files that each contain a multiple Jquerymobile pages. I have created simple code as shown below - each file has the same code (except for the list view links).
When I load file1.php I can use the navigation bar to switch from Page 1 to Page 2.
When I click a link to file2.php it loads on Page 1 (i.e. file1.php#Page1. However, when I try to navigate to Page 2, it loads file1.php#Page2 instead of file2.php#Page1 ..
I presume I have done something wrong regarding loading the page properly into the DOM - but I'm not sure how to fix it - any help would be greatly appreciated.
(note header.php just includes all necessary cs and javascript for jquerymobile)
<?php
require_once("header.php");
?>
<body>
<!-- This is the first page -->
<div id="page1" data-role="page">
<header data-role="header">
<h1>Page1</h1>
</header>
<div data-role="navbar">
<ul>
<li>Page1</li>
<li>Page2</li>
</ul><br>
</div>
<ul>
<li>Link to first HTML page</li>
<li>Link to third HTML page</li>
</ul>
</div>
<!-- This is the second page -->
<div id="page2" data-role="page">
<header data-role="header">
<h1>Page2</h1>
</header>
<div data-role="navbar">
<ul>
<li>Page1</li>
<li>Page2</li>
</ul><br>
</div>
<ul>
<li>Link to first HTML page</li>
<li>Link to third HTML page</li>
</ul>
</div>
</body>
</html>
My index.html page is like following:
<div id="sidepanel" ng-controller="myCtrl">
<ul class="drop-down">
<li ng-repeat="item in items">
{{item.name}}
</li>
</ul>
</div>
<div id="mainpanel" ng-controller="listCtrl">
<div ng-view></div>
</div>
For this ng-view I have record-list.html to show all the records which is like following:
<div class="container">
<ul class="design">
<li id="{{record.name}}" ng-repeat="record in records">
<div>......</div>
</li>
</ul>
</div>
Now i want to add the same structure (as like each record) append on the click of each item of the side panel.
what is the logic for that ?
My recent UI Looks like this & i want to add the same structure on each click which should be append the existing structure.
Please Help.Thanks.
It sounds like perhaps each "record" has a set of children "records." If this is the case, I would recommend using angular's ng-switch directive to conditionally display the correct (or no) set of sub-records on the side.