I am using the following code block:
<section id="content">
<div class="block-border">
<div data-ng-controller="AdminGridContentController">
<ng-include src="'/Content/app/admin/partials/grid-content-base.html'"></ng-include>
<ng-include src="'/Content/app/admin/partials/table-content.html'"></ng-include>
<ng-include src="'/Content/app/admin/partials/modal-content.html'"></ng-include>
</div>
</div>
</section>
This works but when it displays first of all it displays a "block-border" which in my case is a shadow border. Then after a short time the inside contents display.
Is there a way I can make it so the outer <DIV> does not show until the inside includes are ready?
Yo should try ngCloak:
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
http://docs.angularjs.org/api/ng.directive:ngCloak
so... in your case:
<section id="content">
<div class="block-border">
<div data-ng-controller="AdminGridContentController" ng-cloak>
<ng-include src="'/Content/app/admin/partials/grid-content-base.html'"></ng-include>
<ng-include src="'/Content/app/admin/partials/table-content.html'"></ng-include>
<ng-include src="'/Content/app/admin/partials/modal-content.html'"></ng-include>
</div>
</div>
</section>
Use this:
HTML
<div data-ng-controller="AdminGridContentController">
<ng-include src="'/Content/app/admin/partials/grid-content-base.html'" ng-show="isLoaded"></ng-include>
<ng-include src="'/Content/app/admin/partials/table-content.html'" ng-show="isLoaded"></ng-include>
<ng-include src="'/Content/app/admin/partials/modal-content.html'" ng-show="isLoaded"></ng-include>
</div>
Javascript
yourApp.controller('AppController', ['$rootScope', function ($scope, $rootScope,) {
$scope.isLoaded = false;
$rootScope.$on('$includeContentLoaded', function(event) {
$scope.isLoaded = true;
});
}]);
References
ng-show
ng-include
The ng-include directive raises an $includeContentLoaded event. You could use that to set a value which in turn controls a ng-show directive placed on the block-border element.
https://github.com/angular/angular.js/blob/master/src/ng/directive/ngInclude.js#L178
Related
Need to bind variable from controller to view:
In Index html:
<body ng-app="widget" ng-controller="WidgetCtrl">
<div ng-view class="chatWidget"></div>
</body>
In controller:
$scope.showHideSchedule = true;
In view:
<div ng-show="WidgetCtrl.showHideSchedule">{{WidgetCtrl.showHideSchedule}}</div>
WidgetCtrl.showHideSchedule - doesn't works
Try to put an alias for controller like
<body ng-app="widget" ng-controller="WidgetCtrl as wg">
<div ng-view class="chatWidget"></div>
</body>
<div ng-show="wg.showHideSchedule">{{wg.showHideSchedule}}</div>
Using ng-view like you are. I would set up the html body like this
<body ng-app="widget" ng-controller="MainCtrl">
<div ng-view class="chatWidget"></div>
</body>
Then I would set the widget.html file like this
<div ng-show="widget.showHideSchedule">{{widget.widgetName}}</div>
Then your js code should look something like this in order to use that widget alias
.controller('WidgetCtrl',
function() {
this.showHideSchedule = true;
this.widgetName = 'new widget';
}])
Here is a plunker of this
https://plnkr.co/edit/l6lmAByRXm3dYfHIrARX?p=preview
It works by me with help of $scope.$broadcast event. I am not sure is it a best solution, but it works.
So first of all, this works: (The html loads)
<div ng-include src="'start.html'"></div>
Here, the sideBar variable shows that the sideBar scope variable is equal to 'start.html' but when I insert it into the ng-include src - it does not work.
<div>{{ sideBar }}</div> <!-- sideBar appears on the page as start.html -->
<div ng-include src="'{{ sideBar }}'"></div>
This also does not work:
<div ng-include src="{{ sideBar }}"></div>
and this does not work either:
<div ng-include src={{ sideBar }}></div>
only this works:
<div ng-include src="'start.html'"></div>
How can I make the include work with a scope variable?
Read documentation for ng-include.
Following works:
<div ng-include="sideBar"></div>
<div ng-model="sideBar" ng-include src="sideBar"></div>
this works
I want to have a login view outside ng-view, but is it even possible with angular.js? couldnt find any examples of folowing on the internet. Example is descibed below.
<div class="container">
<div class="header">
<div class="loginView"> my huge login view</div>
</div>
</div>
<div class="container">
<div ng-view></div>
</div>
Yes. Assign a controller to the loginView and treat it like any other view.
ng-view is just used when using the $routeProvider to define routes.
This is perfectly valid. ngView is used to complement the router. This means it is just a directive as any other. You can put anything around it.
It sounds like you want something like this: Live demo here (click).
<div class="container">
<div class="header">
<div class="loginView" ng-include="'login.html'"></div>
</div>
</div>
You could also include your file from a $scope property like this:
$scope.foo = 'login.html';
<div ng-include="foo"></div>
I have a directive by name cngView
controller.js
//directive to include view panel
angular.module('cngFoundation', [])
.directive('cngView', function() {
return {
restrict : 'CAME',
templateUrl: 'templates/view.html'
};
});
to access directive
<div ng-app="cngFoundation">
<div id="mainbody" class="container">
<cng-view>
[AAA]
</cng-view>
</div>
</div>
The templates/view.html is as follows
<!-- View Panel-->
<div class="panel panel-primary " id="view" >
<div class="panel-heading">
<h3 class="panel-title" ><b>View</b></h3>
</div>
<div class="panel-body">
[BBB]
</div>
</div>
I have made the cng-view tag work but I don't know how to give contents inside the tag.
How to make contents I give at place "[AAA]" appear at "[BBB]" .
In short how to make contents I give within cng-view tag(a custom tag) go into the specific place inside the template content of the cng-view .
Please give guidance . At least please direct me to some online tutorial .
Thanks
You need to use ng-transclude which tells template where to place existing content
<div class="panel-body" ng-transclude></div>
Also need to set transclude:true in directive
See section Creating a Directive that Wraps Other Elements in directive docs
You can use the built in ng-transclude directive. In your view.html replace [BBB] with
<span ng-transclude></span>
also be sure to define transclude on your directive
transclude: true,
For a working example see this plunkr
I am using multiple named ui-views in a single controller. Everything is working as spected when name the ui-view in the html file with this code:
<div class="box">
<div ui-view="selector"></div>
<div ui-view="widget1"></div>
<div ui-view="widget2"></div>
<div ui-view="widget3"></div>
<div ui-view="widget4"></div>
</div>
But when I want to load dynamically some of those views with a ng-repeat it does not update the information.
<div class="widgets">
<div class="widget-container" ng-repeat="widget in widgets">
<div ui-view="{{widget}}"></div>
</div>
</div>
How could I load ui-views from my ng-repeat?
This hadn't been answered so i decided to go ahead and show how to do it. Unfortunately for some reason the attempt in the question didn't work but what you can do is link to a function between curly brackets and return the string of the view you want. For instance the controller would look like this:
$scope.groups = ['main','cases', 'models'];
$scope.pickView = function(index){
return $scope.groups[index];
};