I am facing problem below upon using the ng-inculde in angularJS. The bootstrap burger icon is not working. But if i'm not using the ng-include it works perfectly fine. Did I do something wrong?.
Is there any set-up first that I need to do before using the ng-include?.
Main html
...
<body>
<ng-include src="'../Content/Shared/Header.html'"></ng-include>
<ng-view></ng-view>
</body>
....
Include html
<header>
<div class="container">
<div class="row element-holder">
<div class="col-md-2 col-sm-4 col-12">
<a href="../main/index.html" class="text-logo-holder">
<span class="text">My Project</span>
</a>
</div>
<div class="col-md-4 col-sm-6 col-12">
<form ng-submit="searchProducts()" class="search-holder">
<input type="text" class="form-control" placeholder="Search Collection...." list="_items" ng-model="searchText" ng-keyup="searchItemNames()" autocomplete="off" />
<datalist id="_items">
<option ng-repeat="result in results" value="{{result}}">{{result}}</option>
</datalist>
<button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="col-md-6 col-sm-2 col-12">
<nav class="navbar navbar-expand-lg float-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<img src="../Content/dist/images/icon-header-menu.png" />
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Discover</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item btn-nav-item">
<a class="nav-link" href="" ng-click="logout()" ng-show="isSignedIn">Logout</a>
<a class="nav-link" href="" ng-click="signin()" ng-show="!isSignedIn">Sign In</a>
</li>
<li class="nav-item">
<a id="menu-link" class="nav-link" href="#">
<img src="../Content/dist/images/icon-header-menu.png" />
</a>
</li>
</ul>
</div>
</nav>
<div class="mobile-nav float-right">
<a id="menu-link-mobile" class="nav-link" href="#">
<img src="../Content/dist/images/icon-header-menu.png" />
</a>
</div>
</div>
</div>
</div>
<div id="sidebar-menu" class="side-menu-content">
<ul class="menu-holder">
<li>
<a href="#" class="menu-item row">
<div class="col-3 icon-holder">
<img src="../Content/dist/images/icon-inbox.png" />
</div>
<div class="col-9">
Inbox
</div>
</a>
</li>
<li>
<a href="#" class="menu-item row">
<div class="col-3 icon-holder">
<img src="../Content/dist/images/icon-purchase.png" />
</div>
<div class="col-9">
Purchases
</div>
</a>
</li>
</ul>
<div class="button-holder row">
<div class="col-6 pl-default pr-default" ng-show="!isSignedIn">
<input type="submit" class="btn btn-primary" value="Login/Sign Up" ng-click="signin()" />
</div>
<div class="col-6 pl-default pr-default" ng-show="isSignedIn">
<input type="submit" class="btn btn-secondary" value="Logout" ng-click="logout()" />
</div>
<div class="col-6 pl-default pr-default">
<input type="submit" class="btn btn-primary" value="Change Password" />
</div>
</div>
</div>
ng-include will:
Fetches, compiles and includes an external HTML fragment.
So that fragment added after page load and your events bind with js will not work on these dynamically added elements. To solve it, you can bind these events with onload arguments which is expression to evaluate when a new partial is loaded. Or you can try attach event to dynamic elements in javascript
Please, remove the single quote.
<div ng-include="../Content/Shared/Header.html"></div>
It seems to be a tag closing issue.
You need to close the <header> tag at the end of Header.html
use this :
<div ng-include src="'../Content/Shared/Header.html'"></div>
Related
i want to list the name of courses from my database in my navbar menu (app view) :
#foreach ($cours as $cour)
<li><a class="dropdown-item">{{ $cour->nom }}</a></li>
#endforeach
and i created my layoutcontroller to display the view :
class layoutController extends Controller
{
public function showView()
{
$cours = DB::table('cours')->select('id','nom')->get();
return view('app',['cours' => $cours]);
}
}
then i made a route for it :
Route::get('#','layoutController#showView');
the problem is when i navigate to login view for exemple it shows an error that the variable cours is undefined in my app layout view :
Undefined variable: cours (View: C:\wamp64\www\opencourses\resources\views\layouts\app.blade.php) (View: C:\wamp64\www\opencourses\resources\views\layouts\app.blade.php)
here is my login view :
#extends('layouts.app')
#section('content')
<div class="container-fluid">
<div class="row">
<div class="col-md-8 offset-md-2 px-3 py-3 pt-md-4 pb-md-4">
<div class="card">
<div class="card-header">Connexion</div>
<div class="card-body">
<form class="form-horizontal" method="POST">
{{ csrf_field() }}
<div class="row mb-3">
<label for="email" class="col-sm-3 offset-sm-1 col-form-label">Adresse Email</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="email" name="email">
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-sm-3 offset-sm-1 col-form-label">Mot de passe</label>
<div class="col-sm-7">
<input type="password" class="form-control" id="password" name="password">
</div>
</div>
<div class="row mb-3">
<div class="offset-sm-4 col-sm-7">
<button type="submit" class="btn btn-primary">Envoyer</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
#endsection
and here is my app view :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Mon blog</title>
<link rel="icon" href="https://www.jsdelivr.com/img/icon_256x256.png">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css">
<!-- other CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/font-awesome#4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light p-3 px-md-4 mb-3 bg-body border-bottom shadow-sm">
<div class="container-fluid">
<a class="navbar-brand" href="welcome.html">
<img src="https://www.jsdelivr.com/img/icon_256x256.png" width="30" height="30" class="d-inline-block align-top" alt=""> Mon blog
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 d-flex">
<li class="nav-item px-2">
<a class="nav-link active" aria-current="page" href="<?php echo url('')?>">Accueil</a>
</li>
<li class="nav-item dropdown px-2">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Articles
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
#foreach ($cours as $cour)
<li><a class="dropdown-item">{{ $cour->nom }}</a></li>
#endforeach
</ul>
</li>
<!-- si utilisateur non authentifié -->
#guest
<li class="nav-item px-2">
<a class="btn btn-outline-primary me-2" href="<?php echo url('login')?>">Connexion</a>
</li>
<li class="nav-item px-2">
<a class="btn btn-primary" href="<?php echo url('register')?>">S'inscrire</a>
</li>
#else
<!-- si utilisateur authentifié -->
<li class="nav-item px-2">
<a class="nav-link" href="home">Mon compte</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="{{ route('logout') }}" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">Déconnexion</a>
</li>
#endguest
</ul>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</div>
</div>
</nav>
#yield('content')
<footer class="container pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="https://www.jsdelivr.com/img/icon_256x256.png" alt="" width="24" height="24">
<small class="d-block mb-3 text-muted">© 2017–2021</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Team feature</a></li>
<li><a class="link-secondary" href="#">Stuff for developers</a></li>
<li><a class="link-secondary" href="#">Another one</a></li>
<li><a class="link-secondary" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Resource name</a></li>
<li><a class="link-secondary" href="#">Another resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Privacy</a></li>
<li><a class="link-secondary" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
In your existing action you've sent $cours variable only for login view blade. In this kind of situations you can use share() method via "View" facade. This will allow you to share the variable to all your blades (which includes your whole layout blade).
// don't forget to include this class in the top
use Illuminate\Support\Facades\View;
public function showView()
{
$cours = DB::table('cours')->select('id','nom')->get();
View::share('action', $action);
return view('login'); // here not need to pass shared variable
}
In other words, with this you can increase the visibility scope of your sent variables.
I use model class to get data from DB. I hope this will help for you,
class Course extends Model
{
//
protected $table = 'cours';
protected $fillable = array('nom');
}
class LayoutController extends Controller
{
public function showView()
{
$cours = Course::select('id','nom')->get();
$data['cours'] = $cours;
return view('app', $data);
}
}
I've the sample bootstrap navbar and form page code in my sample page.The issue is the contents in the navbar is displaying wrongly in mobile view. The collapsible view is incorrect. The content is not readable in mobile view. Can anyone have the solution.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
In my index.html code is:
i have written ng-include directive as
and my menu.html file is
<div class="container">
<div class="row row-content" ng-controller="MenuController">
<div class="col-xs-12">
<button ng-click="toggleDetails()" class="btn btn-xs btn-primary pull-right" type="button">
{{showDetails ? 'Hide Details':'Show Details'}}
</button>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"
ng-class="{active:isSelected(1)}">
<a ng-click="select(1)"
aria-controls="all menu"
role="tab">The Menu</a></li>
<li role="presentation"
ng-class="{active:isSelected(2)}">
<a ng-click="select(2)"
aria-controls="appetizers"
role="tab">Appetizers</a></li>
<li role="presentation"
ng-class="{active:isSelected(3)}">
<a ng-click="select(3)"
aria-controls="mains"
role="tab">Mains</a></li>
<li role="presentation"
ng-class="{active:isSelected(4)}">
<a ng-click="select(4)"
aria-controls="desserts"
role="tab">Desserts</a></li>
</ul>
<div class="tab-content">
<ul class="media tab-pane fade in active">
<li class="media" ng-repeat = "dish in dishes | filter:filtText">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p ng-show="showDetails">{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
but i am not able to get expected result from ng-include directive and i am not able to see menu.html output in my index.html file after opening it in any browser.
Here are my html:
<div masonry id="graphicGridDiv">
<div class="masonry-brick" ng-switch on="{{graphic.length}}" ng-repeat="graphic in graphicArray">
<div ng-switch-when="1" class="col-sm-4 gra-mix-graphic ">
<div class="category_1 custom-menu-preview mix" ng-click="singleGraContent(graphic[0].id)">
<p class="video_title" title="title" ng-bind="$parent.graphic[0].name"></p>
<div class="gra-mix-inner">
<img ng-src="{{$parent.graphic[0].src}}" class="img-responsive">
</div>
<div class="caption">
<p class="video_detail" title="digest" ng-bind="$parent.graphic[0].digest"></p>
</div>
<div class="gra-mix-details-t">
<a class="mix-link but" title="delete" ng-click="graDelete($parent.graphic[0].id)">
<i class="fa fa-times"></i>
</a>
<a class="mix-preview but fancybox-button" title="edit" ng-click="graEdit(graphic[0])" >
<i class="fa fa-pencil"></i>
</a>
</div>
</div>
</div>
<div ng-switch-default class="col-sm-4 gra-mix-graphic">
<div class="gra-mix-details-t">
<a class="mix-link" title="delete" ng-click="graDelete(id)">
<i class="fa fa-times"></i>
</a>
<a class="gra-mix-preview fancybox-button" ng-click="graEdit(id)" title="edit**strong text**" data-rel="fancybox-button">
<i class="fa fa-pencil"></i>
</a>
</div>
<div class="category_1 custom-menu-preview" ng-click="multiGraContent(id)">
<div class="gra-mix-inner thumbnail">
<img ng-src="{{graphic[0].src}}" class="img-responsive" style="width: 330px;">
</div>
<div class="multiFirstTitle">
<p class="video_sub_title" title="{{graphic[0].name}}" ng-bind="graphic[0].name"></p>
</div>
<div class="multi" ng-repeat="mutiGra in graphic | arrayLimitFilter:1 ">
<p title="{{mutiGra.name}}" ng-bind="mutiGra.name" class="video_artical_title"></p>
<div class="multiImage" id="multiImageDiv">
<img ng-src="{{mutiGra.src}}" class="multiImage">
</div>
</div>
</div>
</div>
</div>
</div>
Here is the actual error text:
at Object.$watchCollectionAction [as fn] <div class="masonry-brick ng-scope" ng-switch="" on="{{graphic.length}}"
ng-repeat="graphic in graphicArray">
ng-controller is not specified anywhere in your HTML. Assuming your controller is named masonry you need to add ng-controller="masonry" to your outer div.
I have angular project My Requirement is : How to display data after update on my UI without refreshing, Data store in server i want it to display on Contact and Recent Tab immediately after Updating.
UI Bindings:
<li class="media contact-card">
<div class="media-left">
<a ui-sref=".viewClient({'clientId':client._id})">
<img class="media-object img-circle" src="https://placehold.it/42x42" alt="https://placehold.it/64x64">
<!--<div class="circle" ng-class="getRandomColorClass('Xipesh Gandhi')"><p>{{generateInitialChar('Dipesh Gandhi')}}</p></div>-->
</a>
</div>
<div class="media-body">
<div class="pull-left">
<h4 class="media-heading pull-left">{{client.firstName}} {{client.lastName}}</h4>
</div>
<div class="pull-right">
<a class="" ui-sref=".editClient({'clientId':client._id})"> <i class="glyphicon glyphicon-pencil" ></i></a>
<a class=""> <i class="glyphicon glyphicon-trash" ></i></a>
</div>
<div class="clearfix"></div>
<span>{{client.address}}</span>
<span>{{client.birthDate | date:'mediumDate'}}</span>
</div>
</li>
View :
<div class="tab-wrapper">
<tabset justified="true">
<tab heading="CONTACTS">
<div class="tab-content">
<div>
<div class="pull-right">
<a class="add-client-link" ui-sref=".client"> <i class="glyphicon glyphicon-plus" ></i> Add Contact </a>
</div>
<div class="clearfix"></div>
</div>
<div class="hr"></div>
<div class="scrollable-container">
<ul class="media-list">
<contact-card data-client="client" ng-repeat="client in clientList"></contact-card>
</ul>
</div>
</div>
</tab>
<tab heading="RECENT">
<div class="tab-content">
<div>
<div class="pull-right">
<a class="add-client-link" ui-sref=".client"> <i class="glyphicon glyphicon-plus" ></i> Create Meeting </a>
</div>
<div class="clearfix"></div>
</div>
<div class="hr"></div>
<div class="scrollable-container">
<ul class="media-list">
<contact-card data-client="client" ng-repeat="client in clientList"></contact-card>
</ul>
</div>
</div>
</tab>
</tabset>
</div>
Controller:
$scope.updateClientList = function(client, operation){
if(operations.ADD === operation){
//$scope.clientList.push({firstname: $scope.client.firstName, lastname: $scope.client.lastName});
//$scope.clientList.push(client);
$scope.clientList.push (client);
// $scope.clientList = [];
} else if(operations.EDIT === operation){
} else if(operations.DELETE === operation){
}
$state.go('meeting-home.viewClient', {'clientId':client._id});
};
Does anyone know how to do it?
Please comment $scope.clientList = []; in your code. it will work. Any how you are not mentioning UI binding details.