I'm trying to add an accordion element, but clicking on one accordion header results in nothing (in my application I can actually see the content transition in and then transition out, as if it encountered some condition instructing it to collapse).
I've managed to extract the behaviour in the following codepen:
https://codepen.io/deepdown22/pen/LYNQYeb
<div ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl">
<h1>Hello {{name}}</h1>
<p>Start editing and see your changes reflected here!</p>
{{groups}}
<uib-accordion close-others="true">
<div uib-accordion-group class="panel-default" ng-repeat="group in groups" is-open="group.open">
<uib-accordion-heading>
{{group.title}}
</uib-accordion-heading>
{{group.content}}
</div>
</uib-accordion>
</div>
</div>
angular.module('plunker', ['ui.bootstrap']);
angular.module('plunker').controller('MainCtrl', function($scope) {
$scope.name = 'Plunker';
$scope.groups = [
{'title': 'a', 'content': 'b'},
{'title': 'c', 'content': 'd'}
];
});
I'm sure I'm doing something wrong, but I can't put my finger on what.
First check out the documentation for uib-accordion (https://angular-ui.github.io/bootstrap/). You are using it wrong.
Not <div uib-accordion> it is <uib-accordion>
Codepen is useless without the css
Related
I'm using flask(version 1.0.2) and AngularJS (version 1.7.2) material (version 1.1.10).
Problem is the controller is attached to view and it working, but just not showing value in view.
The controller
$$.controller("bigLayoutToolbarController", function ($scope) {
$scope.title = "---"
console.log(">>", $scope.title)
})
Surprisingly the console logging is working.
>> ---
The view
<section layout="row" flex style="height: 100%" ng-controller="bigLayoutToolbarController">
<h2 flex md-truncate>{{ title }}</h2>
</section>
What am i wrong?
Try removing the md-truncate because it will will automatically clip text which is wider than the component.
DEMO
var app = angular.module('myApp',[]);
app.controller("bigLayoutToolbarController", function ($scope) {
$scope.title = "---"
console.log(">>", $scope.title)
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<body ng-app="myApp">
<section layout="row" flex style="height: 100%" ng-controller="bigLayoutToolbarController">
<h2 flex md-truncate>{{ title }}</h2>
</section>
</body>
Update:
Using ng-include height is 0. I've provided a totally simplified example below. I need to know how to fix this and make it so the page says Hello.
<ion-view title="Page">
<ion-content padding="true" class="has-header">
<div ng-include="'templates/page30'"></div>
</ion-content>
</ion-view>
Where the templates/page30 file is
<p>Hello</p>
Original Post:
I need to figure out how to get my ng-include to be shown within an ng-switch. Currently the code does not work. Two things aren't happening as expected. The outer button is way small and the ng-included sub-forms are not showing as their height is 0. Please keep in mind I am using Ionic which means I do not have access to *.height().
NOTE: I'm only showing step 1 of the ng-switch otherwise this would be too bulky.
<ion-view title="Some Template" hide-nav-bar="true">
<ion-content padding="true" class="has-header">
<div ng-controller="someCtrl">
<ng-switch on="step">
<div ng-switch-when="1">
<div height-bind height-value="containerHeight">
<ng-include src="'templates/somepage.html'"></ng-include>
</div>
</div>
</ng-switch>
</div>
</ion-content>
</ion-view>
I have built a directive that looks like the following:
llApp.directive('heightBind', function() {
return {
scope: {
heightValue: '='
},
link: function($scope, $element) {
$scope.$watch(function() {
$scope.heightValue = $element.prop('offsetHeight');
});
}
}
});
The template called by ng-include is the following:
<ion-view title="Services" hide-nav-bar="true">
<ion-content padding="true" class="has-header">
<div class="page-header">
<h1>
<span>Lawncare</span>Services</h1>
</div>
<ul class="list">
<li class="item item-checkbox">
Mow Lawn
<label class="checkbox">
<input type="checkbox">
</label>
</li>
<li class="item item-checkbox">
Trim Plants
<label class="checkbox">
<input type="checkbox">
</label>
</li>
</ul>
</ion-content>
</ion-view>
One last thing. The controller someCtrl looks like the following: (actual controller reference is missing because I'm currently working within ionic creator)
function($scope, $stateParams) {
// Set the step initially to 1 every time this controllwer is instantiated.
// Usually on ng-switch button update the
// step value via the setStep function provided
$scope.step = 1;
$scope.setStep = function(step) {
$scope.step = step;
}
$scope.containerHeight = 0;
}
Some of the other things I've looked at to solve this. I have looked at:
http://stackoverflow.com/questions/25108780/height-of-container-with-ng-repeat-directive-is-zero
As well as this plunker:
Plunker
You are setting the height to 0 in the controller:
$scope.containerHeight = 0;
I tried to add ng-click on a button generated before (dynamic), but didn't work well. Also I tried already all solutions found on this forum and no one work well.
My html code:
<body class="max_height" ng-app="myApp">
<div class="container max_height" ng-controller="myCtrl">
<div id="play" tabindex="0" ng-init="init()" ng-keydown="keyDown($event)">
{{ content }}
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/script.js"></script>
</body>
My AngularJS code:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $compile) {
$scope.init = function() {
var el = '<button class="btn" id="start" data-ng-click="startAnimation()">Start</buttom>';
var element = angular.element(document.querySelector('#play'));
var generated = element.html(el);
$compile(generated)($scope);
}
$scope.startAnimation = function(){
console.log("click");
}
});
My error is "RangeError: Maximum call stack size exceeded" and this is generated by $compile(generated)($scope); . Another problem, derived from the first, is that if I make one click on button then the function startAnimation will me executed hundreds of times.
Please give me a solution. Where is the mistake.
Issue is with this line of code:
$compile(generated)($scope);
Instead it should be:
$compile(generated.contents())($scope);
You can assign the function to a scope variable and depending on your business logic assign appropriate functions to your ng-click. In the below example $scope.addGeoFence() is added to the ng-click of "Add GeoFence" list-item
$scope.layout = [
{name: 'Home', icon: 'home'},
{name: 'Add Geofence',
icon: 'add_location',
click: $scope.addGeoFence}
];
$scope.addGeoFence = function() {
console.log("calling addGeoFence()");
}
<md-list>
<md-list-item ng-repeat="snav in layout">
<md-button class="md-raised" ng-click="(snav.click)()" flex>
<md-icon md-font-library="material-icons">{{snav.icon}}
</md-icon>
<span>{{snav.name}}</span>
</md-button>
</md-list-item>
</md-list>
I have created an AngularJS directive on one of the pages and it's not rendering. I don't get any errors either. Following is the directive template and directive binding code. Appreciate if someone can help.
directive.js
var cardCollapsiblePanelModule = angular.module('cardCollapsiblePanelModule',[]);
cardCollapsiblePanelModule.directive('cardCollapsiblePanel', function() {
return {
restrict: 'A',
templateUrl: 'scripts/virtualserver/virtualserverfeatures/monitoringprobes/views/directive- templates/monitoring-probe-card-collapsible-panel-template.html',
scope: {
cardName: '#cardName'
},
controller: function ($scope, $element, $attrs) {
// update dependent scope.
},
link: function (scope, $element, $attrs) {}
}
});
directive HTML:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title clearfix" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<div class="pull-left">{{ cardName }}</div>
<div class="pull-right" ><span class="iconSmall iconExpand"></span></div>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<!-- load the capture card settings directive here -->
</div>
</div>
</div>
directive is being used as follows:
<div class="panel-group" id="accordion">
<!-- accordion directive for collapsible panel -->
<div card-collapsible-panel card-index="{{$index}}" ng-repeat="card in monitoringProbeCards">
</div>
</div>
My objective is to bind the headers of collapsible panels with the card name through the directive. Can someone point out what's wrong with the code?
My REST service response is as follows:
[{"id":1,"cardName":"Card 0 : PIST-16-TDM-PCI-Basic-32 - SN: GPER190201064","interfaceType":"TDM","probeServerId":2},{"id":2,"cardName":"Card 1 : PIST-16-TDM-PCI-Basic-32 - SN: GPER190201065","interfaceType":"TDM","probeServerId":2}]
Try this...
<div class="panel-group" id="accordion">
<!-- accordion directive for collapsible panel -->
<div ng-repeat="card in monitoringProbeCards">
<div card-collapsible-panel="{{$index}}"></div>
</div>
</div>
I think you need to add card-name to the directive Div:
<div card-collapsible-panel card-index="{{$index}}" ng-repeat="card in monitoringProbeCards" card-name="{{card.cardName}}" >
Binding to {{cardName}} from the directive HTML, binds to the cardName field on the isolated scope which in turn via the # sign followed by cardName binds to the card-name attribute on the directive using one-way data binding which means that the value of that attribute needs to be evaluated by Angular, hence the {{card.cardName}}.
I am really new to Angular and this is the first time that I am dealing with routing, so please excuse me if my questions are a bit confusing. My actual logic and structure for this app is much more complex and I am using several services, but this is the general idea of the part that I am having issues with. I would really APPRECIATE your help! Thanks.
SOLVED
I was adding the same template recursively. Inside the template, I changed that ng-repeat template to another one and it worked perfectly. http://jsfiddle.net/GeorgiAngelov/9yN3Z/111/
UPDATED
jsFiddle: http://jsfiddle.net/GeorgiAngelov/9yN3Z/106/
I updated my fiddle thanks to Chandermani ( I removed all the controllers and left only one copy of it) but now I get "10 $digest() iterations reached" whenever I click on the Add Root button OR whenver I click on a section it keeps giving me that error... No idea why.
So I have an app where I have a menu on my left side where I can add more elements called sections to that menu. That menu section item is derived from an array called sections that sits in my controller and when you add a section it adds it to the array named sections.
$scope.sectionId = $routeParams.sectionId;
$scope.sections = [];
$scope.counter = 1;
$scope.section = {};
$scope.addSection = function(){
$scope.sections.push({
id: $scope.counter++,
name: 'Random Name',
roots: []
});
};
*HTML for sections *
<body ng-app="myApp" ng-controller="MyController">
<div class="tabbable tabs-left pull-left">
<ul class="nav nav-tabs">
<li ng-repeat="section in sections" ng-click="setSectionSelected(section)" ng-class="{active : isSectionSelected(section)}">{{section.name}}</li>
</ul>
<button class="addSection btn btn-success" ng-click="addSection()" style="position:relative; bottom: 0;">Add Section</button>
</div>
<div >
<div class="tab-pane" ng-class="{active : isSectionSelected(section)}" id="{{section.id}}" ng-repeat="section in sections">
</div>
</div>
<div ng-view></div>
</body>
Every object in that array has another array called roots and with another button, named Add Root, I want to push objects(elements) to whatever section I am currently on, depending on the $routeParams id variable.
$scope.addRoot = function(section){
section.roots.push({
id: $scope.counter++,
name: 'Random Root',
});
};
HTML template that is called from the router
<script type="text/ng-template" id="/tpl.html">
<div class="map-container">
<div class="map">
<h2>{{section.name}}</h2>
<h4>{{section.description}}</h4>
<button class="add btn btn-success" ng-click="addRoot(section)">Add Root</button>
<div ng-repeat="root in section.roots" ng-include="'/tpl.html'"></div>
</div>
</div>
</script>
app.config(function ($routeProvider) {
$routeProvider
.when('/section', {
templateUrl: '/tpl.html',
sectionId: '1',
})
.when('/section/:sectionId', {
templateUrl: '/tpl.html',
})
.otherwise({
redirectTo: '/'
});
});