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>
Related
I try to use angular-ui-tree, but collapse not working. I use example from their github with minor changes, but id did not help.
My example:
http://plnkr.co/edit/MIMQ0GWnhQnZ1AhhKzo5?p=preview
<body ng-controller="tCtrl">
<div class="tree">
<div class="row">
<div class="col-sm-12">
<h3>Basic Example</h3>
<button ng-click="expandAll()">Expand all</button>
<button ng-click="collapseAll()">Collapse all</button>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div ui-tree="" id="tree-root">
<ol ui-tree-nodes="" ng-model="listss">
<li ng-repeat="t in listss" ui-tree-node="">
<div ui-tree-handle="" class="tree-node tree-node-content">
<button data-nodrag="" ng-click="toggle(this)">saad</button>
{{t.name}}
</div>
<ol ui-tree-nodes="" ng-model="t.list" ng-class="{hidden: collapsed}">
<li ng-repeat="s in t.list" ui-tree-node="">
<div ui-tree-handle="" class="tree-node tree-node-content">
<button ng-click="toggle(this)">sad</button>
{{s.name}}
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
</div>
</div>
</body>
You miss CSS class. Please, insert your file CSS.
.hidden {
display: none!important;
visibility: hidden!important;
}
Github use bootstrap.min.css
Try the following things:
add some options from in your controller:
$scope.treeOptions = {
accept: function (sourceNodeScope, destNodesScope, destIndex) {
return false;
},
};
2.get the treeview:
var getRootNodesScope = function () {
return angular.element(document.getElementById("tree-root")).scope();
};
add the collapse / expand functions to your controller:
$scope.collapseAll = function () {
var scope = getRootNodesScope();
scope.collapseAll();
};
$scope.expandAll = function () {
var scope = getRootNodesScope();
scope.expandAll();
};
Replace the following line :<div ui-tree="" id="tree-root">
with div ui-tree="treeOptions>"
5.Optional: Place the id="tree-root" on your <ol> element.
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', [])
...
I have a custom directive with isolated scope for category :
'use strict';
angular.module('myModule').directive('myContent', function() {
return {
restrict: 'E',
templateUrl: 'myContent.html',
scope: {
category: '='
},
controller: function($scope){
// private methods
},
controllerAs: 'myContentCtrl'
};
});
In my main directive am calling the same directive as :
<div>
<my-content category = "category1"></my-content>
</div>
<div>
<my-content category = "category2"></my-content>
</div>
<div>
<my-content category = "category3"></my-content>
</div>
And myContent.html is having :
<div class="form-group">
<div class="col-lg-10 navbar">
<ul class="nav nav-tabs" role="tablist">
<li class="active itemFirst"><a href="#link1" role="tab"
data-toggle="tab">Link 1 </a>
</li>
<li>Link 2 </li>
<li>Link 3 </li>
</ul>
</div>
</div>
<div class="form-group">
<div class="tab-content col-lg-10">
<div class="tab-pane active" id="link1">
// contents here for link 1
</div>
<div class="tab-pane" id="link2">
// contents here for link 2
</div>
<div class="tab-pane" id="link3">
// contents here for link 3
</div>
</div>
</div>
Here my issue is, the id is getting replicating as the same direct is populating each links.
So the UI is not populating the different directives and tabs properly.
How can I separate the Id of each one by identifying the category value I had send to each directive.
My requirement is making id dynamic as :
id = "link1_{{category}}"
But it is not reflecting. How can I achieve this?
Updating the category object.
My category objects are having some data like :
$scope.category1 = [
{obj1},
{obj2},
{obj3},
{obj4}
];
$scope.category2 = [
{obj1},
{obj2},
{obj3},
{obj4}
];
So I can't use category1 object as an ID. instead how can i use the string "category1" that I'm separating each categories. I hope now the code is clear.
I just resolved it in a complicated approach, but am not sure about the perfection.
I had added one more data in category object as "type"
Now my category object is:
$scope.category1 = {
type : "category1",
data : [
{obj1},
{obj2},
{obj3},
{obj4}
]
};
$scope.category2 = {
type : "category2",
data : [
{obj1},
{obj2},
{obj3},
{obj4}
]
};
So in HTML the id is :
<div class="form-group">
<div class="col-lg-10 navbar">
<ul class="nav nav-tabs" role="tablist">
<li class="active itemFirst"><a href="#{{category.type}}" role="tab"
data-toggle="tab">Link 1 </a>
</li>
<li>Link 2 </li>
<li>Link 3 </li>
</ul>
</div>
</div>
<div class="form-group">
<div class="tab-content col-lg-10">
<div class="tab-pane active" id="{{category.type}}">
// contents here for link 1
</div>
<div class="tab-pane" id="{{category.type}}">
// contents here for link 2
</div>
<div class="tab-pane" id="{{category.type}}">
// contents here for link 3
</div>
</div>
</div>
</div>
I think you need different ID for each <div> for all instances of directive.
<div class="tab-pane active" id={{'link1_'+category}}></div>
and use # in isolated scope to get values of attributes
app.directive('myContent', function() {
return {
restrict: 'E',
templateUrl: 'myContent.html',
scope: {
category : '#'
},
controller: function($scope){
// private methods
console.log($scope.category)
},
controllerAs: 'myContentCtrl'
};
});
Here's the working plunkr
If I understood you correctly, You can set the Id in a function inside your controller...
<div class="tab-pane active" id="{{setId}}">
And in your custom directive with isolated scope for category :
controller: function($scope){
// private methods
$scope.setId = function(){...}
},
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>
I'm new to angular and i'm trying to use ng-switch to dynamically load templates using include in bootstrap modal but click doesn't seem to work. What am i doing wrong here ?
HTML
ModalContent.html
<div ng-controller="Nav" class="modal-body">
<div class="left-nav" ng-include="'LeftNav.html'"></div>
<div class="right-nav" ng-include="'RightNav.html'"></div>
</div>
LeftNav.html
<ul>
<li ng-repeat="item in items">
{{ item }}
</li>
</ul>
RightNav.html
<div ng-switch on="page">
<div ng-switch-when="Item1">
<div ng-include="'Item1.html'"></div>
</div>
<div ng-switch-when="item2">
<div ng-include="'Item2.html'"></div>
</div>
<div ng-switch-when="item3">
<div ng-include="'Item3.html'"></div>
</div>
<div ng-switch-default>
<h1>Default</h1>
</div>
</div>
JS
var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);
app.controller('Nav', function($scope) {
$scope.items = ['Item1', 'Item2', 'Item3'];
})
Plnkr - http://plnkr.co/edit/D1tMRpxVzn51g18Adnp8?p=preview
There were a couple of problems.
Here is a working demo: http://plnkr.co/edit/CZPvD373HbCC2Ism0xlA?p=preview
Comments inline:
Controller
app.controller('Nav', function($scope) {
$scope.items = ['Item1', 'Item2', 'Item3'];
$scope.page = $scope.items[0];
$scope.selectItem = function (item) {
$scope.page = item;
}
})
LeftNav template
<ul>
<li ng-repeat="item in items">
<!-- calling `selectItem` on the controller to set the `page`
otherwise `page` will be set on the current `ng-include` scope
and will be unavailable elsewhere -->
{{ item }}
</li>
</ul>
RightNav template
<!-- 'page' is now from the 'Nav' controller's $scope -->
<div ng-switch on="page">
<div ng-switch-when="Item1">
<div ng-include="'Item1.html'"></div>
</div>
<!-- String matches are case sensitive -->
<div ng-switch-when="Item2">
<div ng-include="'Item2.html'"></div>
</div>
<!-- String matches are case sensitive -->
<div ng-switch-when="Item3">
<div ng-include="'Item3.html'"></div>
</div>
<div ng-switch-default>
<h1>Default</h1>
</div>
</div>