We Keep Coding

directive works strange in bootstrap grid

Im AngularJS newbie:).
I have a simple directive driving some popovers for icon. It works ok in one place but in other is working improperly (it blinks and popup is moved down and it covers the icon).
HTML template:
<div class="row">
<div class="col-lg-6">
<h3 class="box-title">EMPLOYEE DETAILS</h3>
<div class="form-group field-userinfo-username">
<label class="control-label text-padding" for="userinfoUsername">Username</label>
<div class="row">
<div class="col-xs-11">
<input type="text" id="uuserinfoUsername" class="form-control" name="userinfoUsername" readonly ng-model="model.full_name" />
</div>
<div class="col-xs-1">
<form-field-information></form-field-information>
<!-- it's not working properly-->
</div>
</div>
<form-field-information></form-field-information>
<!-- it's working properly-->
...
Directive code:
'use strict';
angular.module('app')
.directive('formFieldInformation', function() {
return {
restrict: 'E',
template: '<i class="glyphicon glyphicon-question-sign" style="font-size: 16px" uib-popover="This field describes ..." popover-title="Field information:" popover-trigger="mouseenter"></i>'
//replace: true
};
});
Video added here

Your container (col-xs-1) is too small for the popup to fit inside when displayed. An easy fix is popover-append-to-body="true"
Code:
template: '<i class="glyphicon glyphicon-question-sign" style="font-size: 16px" uib-popover="This field describes ..." popover-append-to-body="true" popover-title="Field information:" popover-trigger="mouseenter"></i>'

Rows not getting displayed when implemented with angularjs

Empty Rows are getting added in the table but the row values are not reflecting after entering values in modal popup form.
This is the html snippet wherein i have already added ng-controller="compctrl" .
<!-- BEGIN CONTAINER -->
<div class="page-container">
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<div class="page-content" ng-controller="compctrl">
<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
<!-- /.modal -->
<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
<!-- BEGIN PAGE HEADER-->
<!-- BEGIN PAGE HEAD -->
<div class="page-head">
<!-- BEGIN PAGE TITLE -->
<div class="page-title">
<h1>Deep discounts</h1>
</div>
<!-- END PAGE TITLE -->
<!-- BEGIN PAGE TOOLBAR -->
<!-- END PAGE TOOLBAR -->
</div>
<!-- END PAGE HEAD -->
<!-- BEGIN PAGE BREADCRUMB -->
<ul class="page-breadcrumb breadcrumb">
<li>
Home
<i class="fa fa-circle"></i>
</li>
<li>
Discounts
<i class="fa fa-circle"></i>
</li>
<li>
Deep Discounts
</li>
</ul>
<!-- END PAGE BREADCRUMB -->
<!-- END PAGE HEADER-->
<!-- BEGIN PAGE CONTENT-->
<div class="clearfix">
<button type="button" class="btn btn-primary green pull-right" data-toggle="modal" data-target="#myModal">Add new field</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" >
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add New Discount</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" ng-submit="addRow()">
<div class="form-group">
<label class="col-md-3 control-label">Name</label>
<div class="col-md-9">
<input type="text" class="form-control" name="name" ng-model="name">
<span class="help-block">A block of help text. </span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Strength</label>
<div class="col-md-9">
<input type="number" class="form-control" placeholder="Enter number" ng-model="strength">
<span class="help-block">A block of help number. </span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Location</label>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Enter text" ng-model="location">
<span class="help-block">A block of help text. </span>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-12">
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-globe"></i>Datatable with TableTools
</div>
<div class="tools">
</div>
</div>
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover" id="sample_1">
<thead>
<tr>
<th>
Name
</th>
<th>
Strength
</th>
<th>
Location
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="company in companies">
<td>{{company.name}}
</td>
<td>{{company.strength}}
</td>
<td>{{company.location}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- END EXAMPLE TABLE PORTLET-->
</div>
</div></div>
</div>
</div>
<!-- END CONTENT -->
<!-- END CONTAINER -->
This is the app.js state provider context:
.state('myDatatablesAdvanced', {
url: "/datatables/deepdiscount1",
templateUrl: "views/datatables/deepdiscount1.html",
data: {pageTitle: 'Advanced Datatables', pageSubTitle: 'advanced datatables samples'},
controller: "compctrl",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
files: [
'../../../assets/global/plugins/select2/select2.css',
'../../../assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css',
'../../../assets/global/plugins/datatables/extensions/Scroller/css/dataTables.scroller.min.css',
'../../../assets/global/plugins/datatables/extensions/ColReorder/css/dataTables.colReorder.min.css',
'../../../assets/global/plugins/select2/select2.min.js',
'../../../assets/global/plugins/datatables/all.min.js',
'js/scripts/table-advanced.js',
'js/controllers/tab.js'
]
});
}]
}
})
and this is the custom controller "compctrl" that i created to add values in the table.
MetronicApp.controller('compctrl', ['$rootScope', '$scope', 'settings', function($rootScope, $scope, settings) {
$scope.$on('$viewContentLoaded', function() {
$scope.companies = [
{ 'name':'Infosys Technologies',
'strength': 125000,
'location': 'Bangalore'},
{ 'name':'Cognizant Technologies',
'strength': 100000,
'location': 'Bangalore'},
{ 'name':'Wipro',
'strength': 115000,
'location': 'Bangalore'},
{ 'name':'Tata Consultancy Services (TCS)',
'strength': 150000,
'location': 'Bangalore'},
{ 'name':'HCL Technologies',
'strength': 90000,
'location': 'Noida'},
];
$scope.addRow = function(){
$scope.companies.push({ 'name':$scope.name, 'strength': $scope.strength, 'location':$scope.location });
$scope.name='';
$scope.strength='';
$scope.location='';
};
// initialize core components
Metronic.initAjax();
});
}]);
I want to inform that i am using Metronic Theme.But When i input values in modal form ,its not getting added in a row.Only empty rows are appearing.

It could be because of the scope issue of the controller(template) and the modal. Try using $rootscope or try broadcasting the values from the modal to the controller and then push it into $scope.companies from the controller.

How to hide a div with angular js ng-hide

I have a page with a div which contains a jumbotron, this is the first page that is display anytime the site is accessed. On this page I have some links which link to different pages using the '$routeProvide'/angular. I want to hide the jumbotron from the other links/pages but I am not sure how to do that.
main page :
<body ng-app="single-page-app">
<div ng-controller="cfgController">
<div>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header col-md-12 col-sm-12 logo">
<img src="img/gilgal.png" class="img-responsive center-block" alt="Responsive image">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="container-fluid col-md-9 col-sm-12 hidden-xs col-md-offset-2">
<ul class="nav navbar-nav" id="navbar">
<li class="navlink">About Us</li>
<li class="navlink">Advisory Service</li>
<li class="navlink">Investment Service</li>
<li class="navlink">Infrastructure Development</li>
<li class="navlink">Contact</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="jumbotron" ng-hide="hideme">
<div class="container-fluid">
<div class="row jumb">
<div class="col-md-4 col-md-offset-1 head-card">
<h4 class="head-text">ADVISORY SERVICES</h4>
<p class="head-desc">We provide Corporate Finance Advisory Services for private and public institutions in Sub-Saharan Africa</p>
</div>
<div class="col-md-2"></div>
<div class="col-md-4 head-card">
<h4 class="head-text">INVESTMENT MANAGEMENT SERVICES</h4>
<p class="head-desc">We focus on Real Estate and Infrastructural Projects in Sub-Saharan Africa</p>
</div>
</div>
</div>
</div>
<div ng-view>
</div>
<div class="container-fluid col-md-12 foot">
<p class="col-md-offset-1">All content copyright of Gilgal Capital Limited 2015 | Branding and Website by Ashebby</p>
</div>
<!-- Angular Route.js -->
<script src="js/angular-route.min.js"></script>
<!-- Angular.js -->
<script src="js/angular.min.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</div>
</body>
here is my script.js
var app=angular.module('single-page-app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/index',{
templateUrl: 'index.html'
})
.when('/about',{
templateUrl: 'about.html'
})
.when('/advService',{
templateUrl: 'advService.html'
})
.when('/imService',{
templateUrl: 'imService.html'
})
.when('/greService',{
templateUrl: 'greService.html'
})
.when('/contact',{
templateUrl: 'contact.html'
});
});
app.controller('cfgController'['$Scope', function($scope) {
$Scope.hideme = false;
$Scope.$on('$locationChangeStart', function(event) {
$scope.hideme = true;
});
}]);
here is a typical link to a different page about.html :
<div class="container-fluid col-md-12 about-us">
<div class="about-us col-md-offset-1">
<h2 class="col-md-10">
<span class="title2">About Us</span>
<div class="line"></div>
</h2>
<p class="col-md-10 article">text</p>
</div>
</div>

Is that really hard... So ng-hide is easy to use
To hide a div just do this :
<div ng-hide="hideme">your content </div>
and in your controller you define hideme variable like this :
$scope.hideme = true; // true to hide ,false to show
Edit: So in your case do this :
<li class="navlink"><a ng-click="hideIt()" href="#/about">About Us</a></li>
In your controler make a fucntion hideIt to hide the jumbotron div :
$scope.hideIt = function(){
$scope.hideme = true;
}

app.run(['$rootScope', function($rootScope) {
$rootScope.hideme = false;
$rootScope.$on('$routeChangeStart', function(){
$rootScope.hideme = true;
});
Along with your code, just add this run block. It should work.

Alternatives to ng-include in angularjs possible?

For some reason , I could not use ng-include in my main page..
Right now i need an alternative solution to ng-include as my product environment(Microsoft Excel Online is not initializing having ng-include on the main page).
Also, I dont want to use ng-view as i have to stick to single route.
FYI, My ng-include url will point to a html template containing its own controller and its scope variables.
Main Page.html
<body ng-app="myapp">
<div class="container-main" ng-controller="MainCtrl">
<div class="container-content">
<div ng-include="content.url"> </div>
</div>
</div>
</body>
controller.js
angular.module('myapp').controller('MainCtrl', function ($scope) {
$scope.content = { url : 'views/templates/mycontent.html'};
});
views/templates/mycontent.html:
<div class="flat-footer" ng-controller="FooterCtrl">
<div class="icon-home" ng-click="settings=false;help=false;gohome()">
</div>
<div class="icon-question" ng-click="settings=false;help=!help;showHelpPreview()" ng-init="help=false">
<div class="arrow-down" ng-show="help"/>
</div>
<div class="icon-cog" ng-init="settings=false" ng-click="settings=!settings;help=false" ng-show="isloggedIn">
<div class="arrow-down" ng-show="settings" />
</div>
<div class="settings-list" ng-show="settings">
<div class="pull-right icon-cancel-circle" ng-click="settings=!settings;help=false"/>
<button type="button" class="btn btn-primary logout" ng-click="settings=!settings;help=false;logout()">Logout</button>
</div>
<div class="help-option" ng-show="help">
<div class="pull-right icon-cancel-circle" ng-click="help=!help;settings=false"/>
<div>
<h1 class="title">//showHelpForUsecase.name//</h1>
<p class="title-description">//showHelpForUsecase.description// </p>
<dl>
<dt class="welcome-title"> //showHelpForUsecase.subtitle// </dt>
<dd class="welcome-definition"> //showHelpForUsecase.subdescription//</dd>
</dl>
</div>
<div class="footer-help-info">
<p class="more-info">More Info</p>
</div>
<div class="help-buttons-group">
<button type="button" class="btn btn-default help-go-back-btn" ng-click="help=!help;settings=false">Back</button>
</div>
</div>
</div>
I want to remove the ng-include in the main page and load the mycontent.html into "div.container-content" element on loading.
Note : Using bind-html-unsafe attribute instead of ng-include not compiling the html template and just binds the html content and resulting inner html content is not bound to its controller at all.
Please help me with a solution for this.
Regards,
Ram

bind-html-unsafe attribute is the possible workaround for ng-include.
Main Page.html
<body ng-app="myapp">
<div class="container-main" ng-controller="MainCtrl">
<div class="container-content">
<div bind-html-unsafe="content"> </div>
</div>
</div>
</body>
angular.module('myapp').controller('MainCtrl', function ($scope) {
$scope.content = { url : 'views/templates/mycontent.html'};
$http.get('views/templates/mycontent.html', {cache: $templateCache}).success(function(data) {
var newScope = $scope.$new();
$scope.content = $compile(data)(newScope);
});
});

modal not showing up

The twitter boot strap modal is not triggering up....
I have included the js and CSS...
whats the reason in console it showing up two errors....
Uncaught TypeError: undefined is not a function bootstrap.js:29
Uncaught SyntaxError: Unexpected token ;
Providing my fiddle below
http://jsfiddle.net/rajkumart08/wT5ZR/2/
<script type="text/javascript">
$(function() {
$('#event-modal').modal({
backdrop: true;
});
});
</script>
<div class="container">
<section>
<div class="row features">
<div class="span6">
<div id="event-modal" class="modal hide fade">
<div class="modal-header">
<a class="close" href="#">x</a>
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<p>Some information</p>
</div>
<div class="modal-footer">
<a class="btn primary" href="#">Primary</a>
<a class="btn secondary" href="#">Secondary</a>
</div>
</div>
click to open model<span class="ico join"></span>

You should probably listen to what the error says:
- $('#event-modal').modal({
- backdrop: true;
- });
+ $('#event-modal').modal({
+ backdrop: true
+ });
EDIT: http://jsfiddle.net/wT5ZR/4/ -- the fiddle was including jQuery after bootstrap-modal. The latter depends on the former.