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");
};
}]);
Related
I have a div with property information in india, if a user clicks on a button,
the page should be redirect on another page and my whole div should be copy
and open on another page
<div class="box2">
<div style="">
<img src="2.jpg" style="border: 2px solid #EEEEEE; height: 180px;" class="col-lg-6 col-md-6 col-sm-12 col-xs-12" />
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 select">
<div class="borderdiv">
<span ng-repeat="i in data2" style="font-size:16px; font-weight:bold">{{i.A}}</span>
</div>
<div class="borderdiv">
<span ng-repeat="i in data2" style="font-size:12px; font-weight:lighter">Available For <b>{{i.B}}</b> </span>
</div>
<div class="borderdiv">
<span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">Area <b>{{i.C}}</b> Security <b> Rs. {{i.F}}</b></span>
</div>
<div class="borderdiv">
<span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">Rental Unit In<b style="cursor:pointer"> {{i.D}}</b></span>
</div>
<br />
<div class="borderdiv">
<span ng-repeat="i in data" style="font-size:14px; font-weight:normal">
Features
<br />
<span class="glyphicon glyphicon-eject" style="margin-left:20px;"></span>
<span class="glyphicon glyphicon-chevron-left" style="margin-left:20px;"></span>
<span class="glyphicon glyphicon-chevron-right" style="margin-left:20px;"></span>
</span>
</div>
<br />
<div class="borderdiv">
<span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">{{i.E}}</span>
</div>
</div>
</div>
this is my div
<button ng-click="click()">click to view data</button>
this is my button
what i need to do if i want to see the same data on other pages???
You need to create a server-side structural template which will generate the div. Example in PHP
function getViewData() {
?>
<button ng-click="click()">click to view data</button>
>?php
}
And you can add anywhere in your structure if you are using a PHP file like this:
<?php getViewData(); ?>
I will suggest you to go with a angular factory which contains the data that you are looking for and use the html template in the respective page.
Button code remains the same as
<button ng-click="click()">click to view data</button>
Create a new Angular Factory as below
angular.module('myApp').factory('appVariables',function(){
var data2=[];
return{
data2,data2
}
});
Your controller should contain the following click() method
angular.module('myApp').controller('appController',function($scope,appVariables){
$scope.click=function(){
appVariables.data2=$scope.data2;
}
})
Go to the another page inject appVariables as a dependecy to the controller and you can get the same data2 across your app.
This code is genric as the information provided by you is very less.
I have put together a sample for you. I can't create multiple html pages. So you have to put them in different files.
var app = angular.module('sample', []);]
//JS1
app.controller('page1Controller', ['$scope','$http','$rootScope', function($scope, $http){
$scope.page1 = {};
$scope.page1.title = "Page1";
$scope.click = function(page){
$rootScope.page = page;
}
}]);
//JS2
app.controller('page2Controller', ['$scope','$http','$rootScope', function($scope, $http){
$scope.init = function(){
alert("alrt")
$scope.page2 = $rootScope.page;
}
}]);
<div ng-app="sample">
<!--Page1-->
<div ng-controller="page1Controller">
<div>{{page1.title}}</div>
<button ng-click="click(page1)">click to view data</button>
</div>
<!--Page2-->
<div ng-app="sample">
<div ng-controller="page2Controller" ng-init="init()">
<div>{{page2.title}}</div>
</div>
I want to launch a new page when a cube is clicked using Angular. My code is currently not doing anything when I click the boxes so I might have everything wrong.
My on-click function is:
$scope.clicked = function(){
console.log('pppp');
window.location = "#/test.html";
}
I call the function in my HTML like this:
<html>
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet">
<header>
Angularity
</header>
<body ng-app="App">
<div ng-click="clicked()" class="wrap">
<div class="cube" change-background colorcode=¨#f45642¨>
<div class="front" ><span>E</span></div>
<div class="back" ></div>
<div class="top" ></div>
<div class="bottom" ></div>
<div class="left" ></div>
<div class="right" ></div>
</div>
</div>
<div class="wrap2">
<div class="cube" change-background>
<div class="front" colorcode=¨#f45642¨><span>S</span></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="wrap3">
<div class="cube" change-background>
<div class="front" colorcode=¨#f45642¨><span>C</span></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
What is wrong with my code that is not allowing a new link to launch when a box is clicked?
http://codepen.io/Feners4/pen/KggAwg
You need to define the ng-controller and define the clicked function there.
<body ng-app="App">
<div ng-controller="TestCtrl">
.....
</div>
</body>
Here's a fixed version. The problem in your original code pen was that the div element was outside your directive. You also defined $scope.clicked in the wrong spot. I've created a new directive myClick, so it now the HTML looks like
<div ng-click="clicked()" my-click class="wrap">
<div class="cube" change-background colorcode="#f45642">
</div>
</div>
And the directive definition is here:
angular.module('App', [])
.directive('changeBackground', () => {...})
.directive('myClick', () => {
return {
restrict: 'A',
link: (scope) => {
scope.clicked = () => {
console.log('pppp');
window.location = "#/test.html";
}
}
};
});
http://codepen.io/phillypham/pen/PbgXOE
If you don't want to create a new controller and you want just to redirect the user to that url, you can add the click event on your directive:
link: function($scope, element, attr) {
element.on('click', function() { window.location = "#/test.html"; });
[omissis]
enter code here
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 pretty new to angular and I'm kind of stuck with an issue. I have an ng-repeat that shows items. In the items I have a "show more info" button, which when you click it should cause the a new view to replace the current one (including the show more info button). The new view would then have a "go back" button which will switch back to the original state.
Unfortunately I can't seem to figure out how to get this to work.
This is as far as I've gotten...
<article ng-repeat="item in items" class="items">
<div ng-switch on="view">
<div ng-switch-default>
<p>Default State for {{item}}</p>
<div class="btn">More Info
</div>
<div ng-switch-when="info">
<p>Info for {{item}}</p>
<div class="btn">Go back</div>
</div>
</div>
</article>
If someone could help me out here I would appreciate it. Thank you.
You can set the value of view when button is clicked. I would advise you to use item.view instead of view, it will prevent view of other elements to be toggled.
<article ng-repeat="item in items" class="items">
<div ng-init="viewDefaultValue = item.view;" ng-switch on="item.view">
<div ng-switch-default>
<p>Default State for {{item}}</p>
<div class="btn" ng-click="item.view = 'info';">More Info</div>
</div>
<div ng-switch-when="info">
<p>Info for {{item}}</p>
<div class="btn" ng-click="item.view = viewDefaultValue;">Go back</div>
</div>
</div>
</article>
Here is an working example.
(function() {
angular
.module('myApp', [])
.controller('myController', function($scope) {
$scope.items = [{
view: '',
text: 'item1'
}, {
view: '',
text: 'item2'
}]
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div ng-repeat="item in items" class="items">
<div ng-init="viewDefaultValue = item.view;" ng-switch on="item.view">
<div ng-switch-default>
<p>Default State for {{item.text}}</p>
<div class="btn" ng-click="item.view = 'info';">More Info
</div>
</div>
<div ng-switch-when="info">
<p>Info for {{item.text}}</p>
<div class="btn" ng-click="item.view = viewDefaultValue;">Go back</div>
</div>
</div>
</div>
use ng-hide and ng-show instead of ng-switch
<article ng-repeat="item in items" class="items">
<div ng-show="isviewvisible">
<div>
<p>Default State for {{item}}</p>
<div class="btn" ng-click="more()">More Info
</div>
<div ng-hide="isviewvisible">
<p>Info for {{item}}</p>
<div class="btn" ng-click="goBack()">Go back</div>
</div>
</div>
</article>
now in angularjs
$scope.isviewvisible = true;
$scope.more = function(){
$scope.isviewvisible = false;
}
$scope.goBack = function(){
$scope.isviewvisible = true;
}
when you clicked the more() it will hide the view and will show the moreinfo
when you click the goBack() it will hide the moreifo and will show the view
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