In my view i have such code:
<script id="template/accordion/accordion.html" type="text/ng-template">
<div class="panel-group" data-ng-transclude></div>
</script>
<script id="template/accordion/accordion-group.html" type="text/ng-template">
<div class="panel panel-default">
<div class="panel-heading custom">
<h4 class="panel-title custom">
<a href accordion-transclude="heading" data-ng-click="toggleOpen();"><span>{{heading}}</span></a>
</h4>
</div>
<div class="panel-collapse" collapse="!isOpen">
<div class="panel-body" data-ng-transclude></div>
</div>
</div>
</script>
<script type="text/ng-template" id="nodes_renderer.html">
<accordion close-others="false">
<accordion-group>
<accordion-heading>
{{node.Title}}
</accordion-heading>
<div data-ng-bind-html="node.Text"></div>
<ol ui-tree-nodes="" data-ng-model="node.Childs">
<li data-ng-repeat="node in node.Childs" ui-tree-node data-ng-include="'nodes_renderer.html'">
</li>
</ol>
</accordion-group>
</accordion>
</script>
<div ui-tree="options">
<ol ui-tree-nodes data-ng-model="articles">
<li data-ng-repeat="node in articles" ui-tree-node data-ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
is it real to get node.Options.length, when i try to render header here:
<div class="panel-heading">
<h4 class="panel-title">
<a href accordion-transclude="heading" data-ng-click="toggleOpen();" class="no-link"><span>{{heading}}</span></a>
</h4>
</div>
and then if my node.Options are higher then 0 i do ng-class...
how could i pass variable to non-my directive template?
also i must pass there whole node object, so that i could edit it etc...
Every directive lives within a scope. I had a similar case where I wrote a common pager directive that pulls its details from the Controller scope. My templates are externalized, but this does not affect the functionality.
Directive usage:
<div class="row" ng-controller="TableController">
<table-pager></table-pager>
</div>
Directive definition:
angular.module.directive('tablePager', function() {
return {
restrict: 'E',
replace: true,
templateUrl: 'templates/table-pager.html'
};
})
Controller:
angular.module.controller('TableController', function($scope, $log, $location) {
$scope.query = {};
$scope.limit = 20;
$scope.offset = 0;
$scope.currentPage = 0;
$scope.total = 0;
...
}
Template code of templates/table-pager.html (snippet):
<div class="row">
<div class="col-md-4">{{total}} Entries found</div>
<div class="col-md-4 col-pager">...</div>
</div>
You can read more about AngularJS custom directives at http://tutorials.jenkov.com/angularjs/custom-directives.html
HTH
Related
For my below code ng-class isn't working:
HTML
<div class="row-content" ng-controller="MainController">
<div class="tabs">
<div class="col-xs-6">
<h3 ng-class="{selected: searchType == 'news'}">
<a ng-click="SetSearchType('news')"
href="javascript:void(0)">Alumni News</a>
</h3>
</div>
<div class="col-xs-6">
<h3 ng-class="{selected: searchType == 'rss'}">
<a ng-click="SetSearchType('rss')"
href="javascript:void(0)">Firm News</a>
</h3>
</div>
</div>
</div>
AnjgularJS
var app = angular.module('ffApp', []);
app.controller('MainController', ['$scope', function($scope) {
$scope.searchType = 'news';
$scope.SetSearchType = function(type) {
$scope.searchType = type;
}
}]);
I think there is something wrong with your CSS styles or your $scope.selected param. Please check this runnable demo fiddle and carefully compare it with your solution:
View
<div class="row-content" ng-controller="MainController">
<div class="tabs">
<div class="col-xs-6">
<h3 ng-class="{'selected': searchType == 'news'}">
<a ng-click="SetSearchType('news')"
href="javascript:void(0)">Alumni News</a>
</h3>
</div>
<div class="col-xs-6">
<h3 ng-class="{'selected': searchType == 'rss'}">
<a ng-click="SetSearchType('rss')"
href="javascript:void(0)">Firm News</a>
</h3>
</div>
</div>
</div>
AngularJS
var myApp = angular.module('myApp', []);
myApp.controller('MainController', function($scope) {
$scope.searchType = 'news';
$scope.SetSearchType = function(type) {
$scope.searchType = type;
}
});
CSS
.selected a {
color:red;
}
put your class in quotes ('')
<div class="row-content" ng-controller="MainController">
<div class="tabs">
<div class="col-xs-6">
<h3 ng-class="{'selected': searchType == 'news'}">
<a ng-click="SetSearchType('news')" href="javascript:void(0)">Alumni News</a>
</h3>
</div>
<div class="col-xs-6">
<h3 ng-class="{'selected': searchType == 'rss'}">
<a ng-click="SetSearchType('rss')" href="javascript:void(0)">Firm News</a>
</h3>
</div>
</div>
How can i make this work with AngularJS? Have this list left-side, and need to change the center div content from the click in this list.
I'm using NG-CLICK and NG-REPEAT to get the click and generate the list from a JSON.
angular.module('duall')
.controller('documentationController', [
'$scope',
'$http',
function($scope, $http){
$scope.docs = [];
$http.get('static/titles.json').success(function(doc){
$scope.docs = doc;
}).error(function(error){
console.log(error);
});
$scope.cliked = function(index){
$scope.item = $scope.docs[index]
};
}]);
<div ng-controller="documentationController">
<div class="row">
<div class="col s3" >
<div class="input-field col s12" >
<input id="search" type="search" ng-model="q" aria-label="filter docs"/>
<label for="search"><strong>Pesquise Algo! :)</strong></label>
<i class="material-icons prefix">search</i>
</div>
<ul class="animate-container">
<!-- <li ng-repeat="docs in docs | orderBy:'title' | filter:q as results "> -->
<li ng-repeat="docs in docs | filter:q as results ">
<i class="material-icons tiny">search</i>
<a ng-click="cliked($index)" href="">{{docs.title}}</a>
<div class="divider"></div>
<br>
</li>
<li ng-if="results.length === 0">
<strong>Nada encontrado :(</strong>
</li>
</ul>
</div> <!-- Fim col s3 -->
<div class="col s9">
<div class="container">
CONTENT CLICKED MUST BE HERE!
</div>
</div>
</div><!-- Fim col s9 -->
</div><!-- fim ROW -->
</div><!-- Fim Controller -->
on the ng-click you can call a function that affect a variable that will contain what you want to see in your container. the following code is only a sample to show you the idea :
First in a ng-repeat you can call a function with ng-click directive :
<li ng-repeat="docs in docs | filter:q as results ">
<i class="material-icons tiny">search</i>
<a ng-click="cliked($index)" href="">{{docs.title}}</a>
<div class="divider"></div>
<br>
</li>
Function that will affect a specific variable
$scope.cliked = function(index){
$scope.item = $scope.docs[index]
};
Variable that you can display in the good container :
<div class="container">
{{$scope.item}}
</div>
So I have an application and it's working great (MEAN stack), and I'm adding in the <script src="/lib/ui-bootstrap-custom-1.3.3.min.js"></script> and <script src="/lib/ui-bootstrap-custom-tpls-1.3.3.min.js"></script> so that I can use the modal.
The code will be below, but here are some explanations first. I've added angular.module('loc8rApp', ['ngRoute', 'ngSanitize', 'ui.bootstrap']); in my angular app declaration. And then in the controller I properly injected it via locationDetailCtrl.$inject = ['$routeParams', '$modal', 'loc8rData'];. I haven't declared an ng-controlleranywhere in the html, so I'm not really sure what the problem may be.
Lastly, a copy of the error:
Error: [$injector:unpr] http://errors.angularjs.org/1.5.5/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20locationDetailCtrl
Below are 4 blocks of code. The first two are locationDetail.controller.js and locationDetail.view.html, the others are the app.js (angular app.js) and index.html.
locationDetail.controller.js
(function() {
angular
.module('loc8rApp')
.controller('locationDetailCtrl', locationDetailCtrl);
locationDetailCtrl.$inject = ['$routeParams', '$modal', 'loc8rData'];
function locationDetailCtrl($routeParams, $modal, loc8rData) {
var vm = this;
vm.locationid = $routeParams.locationid;
loc8rData.locationById(vm.locationid)
.success(function(data) {
vm.data = { location: data };
vm.pageHeader = {
title: vm.data.location.name
};
})
.error(function(e) {
console.log(e);
});
vm.popupReviewForm = function() {
alert("Let's add a review!");
};
}
})();
locationDetail.view.html
<navigation></navigation>
<div class="container">
<page-header content="vm.pageHeader"></page-header>
<div class="row">
<div class="col-xs-12 col-md-9">
<div class="row">
<div class="col-xs-12 col-sm-6">
<p class="rating" rating-stars rating="vm.data.location.rating"></p>
<p>{{ vm.data.location.address }}</p>
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Opening hours</h2>
</div>
<div class="panel-body">
<p ng-repeat="time in vm.data.location.openingTimes" ng-switch on="time.closed">
{{ time.days }} :
<span class="opening-time" ng-switch-when="true">closed</span>
<span class="opening-time" ng-switch-default>{{ time.opening + " - " + time.closing }}</span>
</p>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Facilities</h2>
</div>
<div class="panel-body">
<span class="label label-warning label-facility" ng-repeat="facility in vm.data.location.facilities">
<span class="glyphicon glyphicon-ok"></span>
{{ facility }}
</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 location-map">
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Location map</h2>
</div>
<div class="panel-body">
<img src="http://maps.googleapis.com/maps/api/staticmap?center={{ vm.data.location.coords[1] }},{{ vm.data.location.coords[0] }}&zoom=17&size=400x350&sensor=false&markers={{ vm.data.location.coords[1] }},{{ vm.data.location.coords[0] }}&scale=2" class="img-responsive img-rounded">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="panel panel-primary review-panel">
<div class="panel-heading">
<a ng-click="vm.popupReviewForm()" class="btn btn-default pull-right">Add review</a>
<h2 class="panel-title">Customer reviews</h2>
</div>
<div class="panel-body review-container">
<div class="review" ng-repeat="review in vm.data.location.reviews | orderBy:'createdOn':true">
<div class="row">
<div class="well well-sm review-header">
<span class="rating" rating-stars rating="review.rating"></span>
<span class="reviewAuthor">{{ review.author }}</span>
<small class="reviewTimestamp">{{ review.createdOn | date : 'MMMM d yyyy' }}</small>
</div>
<div class="col-xs-12">
<p ng-bind-html="review.reviewText | addHtmlLineBreaks"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3">
<p class="lead">{{ vm.data.location.name }} is on Loc8r because it has accessible wifi and space to sit down with your laptop and get some work done.</p>
<p>If you've been and you like it - or if you don't - please leave a review to help other people just like you.</p>
</div>
</div>
<footer-generic></footer-generic>
</div>
app.js (angular app.js).
(function() {
angular.module('loc8rApp', ['ngRoute', 'ngSanitize', 'ui.bootstrap']);
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home/home.view.html',
controller: 'homeCtrl',
controllerAs: 'vm'
})
.when('/about', {
templateUrl: '/common/views/genericText.view.html',
controller: 'aboutCtrl',
controllerAs: 'vm'
})
.when('/location/:locationid', {
templateUrl: '/locationDetail/locationDetail.view.html',
controller: 'locationDetailCtrl',
controllerAs: 'vm'
})
.otherwise({redirectTo: '/'});
$locationProvider.html5Mode(true);
}
angular
.module('loc8rApp')
.config(['$routeProvider', '$locationProvider', config]);
})();
index.html
<!DOCTYPE html>
<html ng-app="loc8rApp">
<head>
<meta name="viewport" content="width=device-width", initial-scale="1.0">
<title>Loc8r</title>
<link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css">
<link rel="stylesheet" href="/stylesheets/style.css">
<base href="/">
</head>
<body ng-view>
<script src="/angular/angular.min.js"></script>
<script src="/lib/angular-route.min.js"></script>
<script src="/lib/angular-sanitize.min.js"></script>
<script src="/lib/ui-bootstrap-custom-1.3.3.min.js"></script>
<script src="/lib/ui-bootstrap-custom-tpls-1.3.3.min.js"></script>
<script src="/angular/loc8r.min.js"></script>
<script src="/javascripts/jquery-1.12.2.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/javascripts/validation.js"></script>
</body>
</html>
Error tells you there is an unknown provider $modalProvider. That means you are injecting $modal and it isn't defined within the app.
The reason is that angular-ui-bootstrap now uses $uib prefix for services.
Try changing $modal to $uibModal and verify in angular-ui-bootstrap docs
I'm trying to load a form using foundation's reveal modal, i need to run a angular controller inside the form to enable the form submission using ajax and not the default post/refresh behaviour.
this is my main view:
<html lang="es" ng-app="crm">
<body>
<script>
var crmapp = angular.module('crm', ['ng.django.forms',"ui.select"]);
</script>
<a data-reveal-id="idmodal" class="fi-burst" data-reveal-ajax="true" href="/operador/clientes/saldos/anadir/13">Añadir Pago</a>
<div id="idmodal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="false">
</div>
</body>
and this is my form:
<div class="row" ng-controller="dummy">
<h2>Añadir Pago</h2>
<ng-form>
<label>Fecha de Cobro:</label>
<label>Valor:</label>
<div class="row">
<div class="columns small-offset-5 small-7">
<button class="buttons success round" ng-click="alert(5)">Añadir</button>
</div>
</div>
</ng-form>
</div>
<script>
crmapp.controller('dummy', function($scope) { $scope.greeting = 'Hola!';console.log("bye"); });
</script>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
any "regular" javascript code in the form is called, but the angular controller isnt working. what can i do?
Here is how to work with ng-click and controller:
JSFiddle
HTML:
<div ng-app="myApp">
<div class="row" ng-controller="dummy">
<h2>Añadir Pago</h2>
<ng-form>
<label>Fecha de Cobro:</label>
<label>Valor:</label>
<div class="row">
<div class="columns small-offset-5 small-7">
<button class="buttons success round" ng-click="greeting()">Añadir</button>
</div>
</div>
</ng-form>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
JS:
angular.module('myApp', [])
.controller('dummy', ['$scope', function ($scope) {
$scope.greeting = function () {
console.log("bye");
};
}]);
I am trying to embed some collapsible panels in a ngRepeat.
This is what I have:
<div class="panel panel-default" ng-repeat="element in elements">
<div class="panel-heading">
{{element.name}}
<button value="Collapse" ng-click="element.isCollapsed != element.isCollapsed"></button>
</div>
<div class="panel-body" collapse="element.isCollapsed">
Content
</div>
</div>
Now, when I click on the button, the collapse doesn't work.
From the documentation I understand that the repeater creates a scope for every element.
And the attribute collapse of the panel-body should get the same scope, right?
It seems that the scope.$watch in the collapse directive is not working properly.
Please check the updated fiddle: http://jsfiddle.net/nZ9Nx/9/
I have created the app and injected ui-bootstrap in it to have the collapse working.
angular.module('test', ['ui.bootstrap']);
The problem is
<div class="panel-heading" toggle target="collapseOne">
It's hardcoded in the example. Replace with...
<div class="panel-heading" toggle target="collapse{{ $index + 1 }}">
Also update this tag
<div id="collapse{{ $index + 1 }}" toggleable active-class="in" exclusion-group="accordion1" default="active" class="panel-collapse collapse">
Here is a full example
<div ng-repeat="item in awesomeThings">
<div class="panel panel-default">
<div class="panel-heading" toggle target="collapse{{ $index + 1 }}">
<h4 class="panel-title">
{{ item }}
</h4>
</div>
<div id="collapse{{ $index + 1 }}" toggleable active-class="in" exclusion-group="accordion1" default="active" class="panel-collapse collapse">
<div class="panel-body">
<!-- ... -->
</div>
</div>
</div>
</div>