for some reason my webpage hangs when I load my directive into the html. So instead of printing 'Dashboard', it's just blank. When I remove the directive call, , it works fine. Am I not defining the directive properly?
I uploaded my code to Github: Project
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview <span class="sr-only">(current)</span></li>
<li><a href="#" >Projects</a></li>
<li>Equipment</li>
<li>Lab Safety</li>
</ul>
</div>
<projects></projects>
</div>
</div>
</div>
Directive:
(function(){
'use strict';
angular
.module('userdashApp.projects.directives')
.directive('projects', projects);
function projects(){
return {
restrict: 'E',
templateUrl: 'template/projects.html'
}
}
})();
Directive Html:
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
</div>
Looks like you need to initiate your module:
angular
.module('userdashApp.projects.directives', [])
...
Related
I am trying out following code for angular js, but not sure where I am getting wrong.
I have included ui-router and every required details. The states are defined for business and about us. Need help to find issue.
var formModule = angular.module("formModule",['ui.router']);
formModule.config(['$stateProvider','$urlRouterProvider',
function ($stateProvider,$urlRouterProvider ){
$urlRouterProvider.otherwise("/");
$stateProvider
.state('business',{
url: '/business',
template: 'This is sample template',
})
.state('aboutus', {
url:'/aboutus',
template: '<div class="row" ng-controller="aboutUsController"><ul > <li ng-repeat="director in directors">{{director.name}}</li> </ul></div>',
controller: 'aboutUsController',
});
}]);
formModule.controller('aboutUsController',['$scope', function($scope){
$scope.directors = [{name: 'Avdhut Sonpethkar'},
{name: 'Sphurti Sonpethkar'},
{name: 'Pruthvi Sonpethkar'},];
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<div class="row">
<div class="col-sm-12">
<ul>
<li >
<a ui-sref=".business" >Business</a>
</li>
<li >
<a ui-sref=".aboutus" >About us</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12" ui-view>
</div>
</div>
The code is correct as per my understanding but not sure where getting it wrong.
Remove the '.' prefix in ui-sref
<a ui-sref="business">Business</a>
<a ui-sref="aboutus">About us</a>
I am learning as I go with my first Angular project and have ran into an issue.
Goal: When an link is clicked in a given .html template placed in with ng-include, I want it to change the value of $scope.selectedLocation
The issue: The value of $scope.selectedLocation does not change.
I read that the ng-include creates a child scope, so in order to change the parent scope variable, you could place $parent in front of the value. I have tried this and it does not work.
Main index page:
<body ng-app="photoApp" id="bodyDiv" >
<div ng-controller="PhotoGallery">
<div>
<ng-switch on="selectedLocation" >
<div ng-switch-when="home" >
<div ng-include="'home.html'"></div>
</div>
<div ng-switch-when="loc1">
<div ng-include="'file1.html'"></div>
</div>
<div ng-switch-when="loc2">
<div ng-include="'file2.html'"></div>
</div>
</ng-switch>
</div>
</div>
</body>
home.html code:
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="selectedLocation='loc1'">
Location 1
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="selectedLocation='loc2'">
Location 2
</a>
</div>
</div>
</div>
photoApp.js code:
var photoApp= angular.module('photoApp', []);
westonPhotographyApp.controller('PhotoGallery', function($scope)
{
$scope.selectedLocation ="home";
}
The issue is that you're binding to a primitive in an inherited scope. To fix it you should pass an object:
westonPhotographyApp.controller('PhotoGallery', function($scope)
{
$scope.vm = {
selectedLocation: "home"
}
}
Html
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="vm.selectedLocation='loc1'">
Location 1
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="vm.selectedLocation='loc2'">
Location 2
</a>
</div>
</div>
ng-include creates a new scope that inherits the parent (controller) scope through the prototype chain. In javascript you can't replace the value of the shadowed inherited property. Passing an object works as you're changing a property on a pointer to the object.
https://github.com/angular/angular.js/wiki/Understanding-Scopes
You seem to have misnamed your app variable. Either name westonPhotographyApp photoApp or vice-versa:
var photoApp = angular.module('photoApp', []);
photoApp.controller('PhotoGallery', function($scope) {
$scope.selectedLocation ="home";
}
Anyways, you could improve on your design:
You could use controllerAs syntax. It names your controller and makes it accessible throughout descendant scopes:
Index:
<div ng-controller="PhotoGallery as pgCtrl">
<div>
<ng-switch on="selectedLocation" >
<div ng-switch-when="home" >
<div ng-include="'home.html'"></div>
...
Home:
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="pgCtrl.selectedLocation='loc1'">
Location 1
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="pgCtrl.selectedLocation='loc2'">
Location 2
</a>
</div>
</div>
</div>
With your controller:
photoApp.controller('PhotoGallery', function() {
var vm = this;
vm.selectedLocation ="home";
}
I created a little example with a simple responsive caroussel that works as expected.
<body>
<div class="wrap">
<header>header</header>
<div class="main">
<div class="container fill" style="padding: 0px;">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="fill" style="background-image:url('app/images/image2.jpg');">
<div class="container">
</div>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('app/images/image1.jpg');">
<div class="container">
</div>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('//placehold.it/1024x700/CC1111/FFF');">
<div class="container">
</div>
</div>
</div>
</div>
<div class="pull-center">
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<footer>#Copyright</footer>
</div>
The matter is that when I bind it using angular, the images are not being displayed.
<div class="wrap">
<header>
</header>
<div class="main">
<div class="container-fluid" style="padding:0px;">
<div ng-view=""></div>
</div>
</div>
<div class="clear"></div>
<footer>
</footer>
</div>
And here is the code in my app.js file (the carousel is defined in the main.html file) :
var app = angular
.module('webappApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('HeaderCtrl', function ($scope, $location) {
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
});
I have no errors in the developer console, and in the network calls, the images are called and found. This it the output I have (only the controls are visible) :
To use ngView you need to have Routes set up. You didn't post any of your app JS code so it's hard to see where it might have gone awry, but generally the approach to do what I think you're asking would be:
Cut out the content for your carousel and put it in a separate .html file (called a "partial"). Make sure to leave out the footer and other elements that are part of your page "skeleton" and just put the content for your carousel into the partial
Add ngRoute to your app
Define routes ( in app.config() ). In your case, if it's just one page you'd likely use the ".otherwise" function on the RouteProvider and set the templateUrl to your partial html file
When route resolves, the partial is loaded into ngView (which can be an element, or an attribute of another element)
Without seeing your code it's tough to tell where you're having trouble, but my guess is that you're just trying to use ngView without routes; easy mistake to make.
I finally found the answer. I had to set the height of the div :
<div class="main">
<div ng-view="" style="height:100%"></div>
</div>
I am trying to use a url to call a tab element. For example, a url like: localhost:9000/widget&view=map will land on the page with the map tab selected and shown the map tab body.
<div class="search-result-tab" ng-init="selectTab='list'">
<ul class="nav tab-header">
<li ng-class="{active: selectTab=='list'}" ng-click="selectTab='list'; changedTab()">
<a href={{listTabURL}}>List</a>
</li>
<li ng-class="{active: selectTab=='map'}" ng-click="selectTab='map'; changedTab()">
<a href={{mapTabURL}}>Map</a>
</li>
</ul>
<div class="tab-body" ng-switch on="selectTab">
<div class="tab-content" ng-switch-when="list">
<div ng-include="'list.html'"></div>
</div>
<div class="tab-content" ng-switch-when="map">
<div ng-include="'map.html'"></div>
</div>
</div>
</div>
Other urls are:
list: localhost:9000/widget&view=list
map: localhost:9000/widget&view=map
Similar question here. One suggestion is to inject the $location service and switch on $location.path, might be worth a try if you are not going to try ui-router (which you really should look into!)
function Ctrl($scope, $location) {
$scope.pagename = function() { return $location.path(); };
};
<div id="header">
<div ng-switch on="pagename()">
<div ng-switch-when="/home">Welcome!</div>
<div ng-switch-when="/product-list">Our products</div>
<div ng-switch-when="/contact">Contact us</div>
</div>
</div>
How to change bootstrap ScrollSpy to angularjs? And the element I don't want to spy on body.
I don't know how to use the .directive in js.
<body data-spy="scroll">
<div style="height: 125px;"></div>
<div class="row">
<div class="col-lg-3 myScrollspy container">
<ul class="nav nav-tabs nav-stacked affix" id="myNav">
<li class="active">Section One</li>
<li>Section Two</li>
<li>Section Three</li>
</ul>
</div>
<div class="col-lg-9 container">
<h2 id="section-1">Section One</h2>
<hr>
<h2 id="section-2">Section Two</h2>
<hr>
<h2 id="section-3">Section Three</h2>
<hr>
</div>
</div>
</div>
</body>
AngularStrap has an implementation of that http://mgcrea.github.io/angular-strap/##scrollspy.
But if you just find an elements scrolltop you can do quite a bit with that value.
With a directive you can locate where an element is on a page something like:
app.directive('ScrollTop', ['$window', function($window) {
return {
scope: {
scroll: '=ScrollTop'
},
link: function(scope, element, attrs) {
var w = angular.element($window);
var handler = function() {
scope.scroll = w.scrollTop();
}
w.on('scroll', scope.$apply.bind(scope, handler));
handler();
}
};
}]);
Then the element will have the value within the scope.
<div scroll-top="scroll_value">{{scroll_value}}</div>