My ngClick call is not working. It throws no error nor do the function I've declared in $scope. Everuthing else seems to work just fine. My code is as follows:
ng-app:
var app = angular.module('dilemas', [
'ngRoute',
'dilemas.controllers',
'dilemas.services'
]);
The controller:
_module.controller('controllerName', ['api', '$scope', function(api, $scope) {
$scope.gotoNext = function(){ console.log("I'm here ;)") };
}]);
The view:
<div id="myID" ng-controller="controllerName">
<div class="ct-full">
<div class="ct-center">
<h1 class="pergunta">Question?</h1>
</div>
</div>
<div ng-include="'include/footer.html'"></div>
</div>
And finally the footer include:
<div id="footer" class="ct-full">
<div class="ct-full">
<div class="ct-center">
<div class="btn btnNext spriteBase" ng-click="gotoNext()">Next ></div>
</div>
</div>
</div>
You can't call gotoNext method because ng-include creates a new child scope.
You could use $parent.gotoNext() in ng-click.
<div class="btn btnNext spriteBase" ng-click="$parent.gotoNext()">Next ></div>
Related
I have a page that uses an AngularJS controller (Ctrl2). This page has a button on it that is supposed to navigate the user to another page with a completely separate controller (Ctrl1) and then to slide 1 of a carousel.
How can this be done?
Cshtml View for Ctrl2:
<div ng-controller="Ctrl2" class="ng-cloak">
<div class="row">
<div class="col-sm-12">
<h1>Controller 2</h1>
</div>
</div>
<div>
<button type="button" class="btn btn-primary" ng-click="goToController1Slide1()">Go to Controller 1, Slide 1</button>
</div>
</div>
Ctrl 2:
'use strict';
app.controller('Ctrl2', ['$scope', '$filter', '$http', '$window', '$location', function ($scope, $filter, $http, $window, $location) {
$scope.goToController1Slide1 = function(){
//what goes in here to get us to Controller 1 Slide 1
};
}]);
Cshtml View for Ctrl1:
<div ng-controller="Ctrl1" class="ng-cloak">
<div class="row">
<div class="col-sm-12">
<div id="the-carousel" class="carousel slide" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-12">
<h1><i class="intelicons-user-plus"></i>Slide 0</h1>
<p>We DO NOT want to end up on this slide from Controller 2</p>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12">
<h1><i class="intelicons-user-plus"></i>Slide 1</h1>
<p>We want to navigate to this slide from Controller 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Ctrl1:
'use strict';
app.controller('Ctrl2', ['$scope', '$filter', '$http', '$window', function ($scope, $filter, $http, $window) {
$scope.sendUserToSlide1 = function(){
//what goes here to accept the navigation from Controller 2 and send the user to Slide 1 of the carousel?
};
}]);
I am trying to display a modal (Note view) from a controller (Details controller). I have separate controllers tied to each view.
The Details view has a list of radio buttons and upon selecting a radio button, it needs to display a modal with some data and OK and Cancel buttons.
Also, I need to deselect the radio button which is selected in Details view when cancel button is clicked on the modal.
How can I wire up all this? I am trying the below code and I get internal server error upon calling note modal from Details controller.
I copied some parts from my code to show what I am trying.
Thanks for any suggestions.
Details view:
<div class="list-group-item" ng-repeat="cpo in details.detailoptions">
<div class="row">
<h4><input type="radio" name="optRadio" ng-model="$parent.selectedOption"
ng-value="{{o}}" ng-change="optionSelected()"
ng-disabled="disableOptions" /></h4>
</div>
</div>
Details controller:
appControllers.controller('detailsCtrl', ['$scope', '$uibModal',
function ($scope, $uibModal) {
$scope.selectedOption;
$scope.optionSelected = function () {
//call note modal
$uibModal.open({
templateUrl: 'notePanel',
controller: 'noteCtrl',
scope: $scope
});
}
}
]);
Note view:
<script type="text/ng-template" id="notePanel" ng-controller="noteCtrl">
<div id="noteModal" class="modal fade">
<div class="modal-dialog">
<div class="form-group">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h4>{{Note.Note1}}</h4>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-offset-1 col-md-10">
{{Note.Note2}}
</div>
</div>
</div>
<div class="panel-footer clearfix">
<div class="row row-centered">
<div class="col-xs-3 col-thin col-centered">
<button type="submit" class="btn btn-primary btn-block" data-dismiss="modal" ng-click="OK()"><span class="glyphicon glyphicon-ok"></span> Agree</button>
</div>
<div class="col-xs-3 col-thin col-centered">
<button type="button" class="btn btn-default btn-block" ng-click="Cancel()"><span class="glyphicon glyphicon-remove"></span> Disagree</button>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
Note controller:
appControllers.controller('noteCtrl', ['$scope', 'dataService',
function ($scope, service) {
$scope.Note;
$scope.OK = function () {
//close modal
}
$scope.Cancel = function () {
//deselect the option selected in Details view.
}
function init() {
service.getNote($scope.optionSelected, function (data) {
if (data) {
$scope.Note = data;
}
else {
console.log('Error getting note file');
//show error dialog
}
});
}
init();
}
]);
I want to enable checkbox when click on
Google
My html code is given below
<div class="wrapper">
<div class="container">
<section class="main-ctr">
<div class="error-msg" ng-show="showError">
<div class="text">Please fix the validation error(s) below and try again</div>
</div>
<div class="error-msg" ng-show="serviceErrorMsg">
<div class="text">{{serviceErrorMsg}}</div>
</div>
<header class="security-header">
<img src="images/lock.png" alt="Security" class="security">
</header>
<main class="sm-main">
<section class="fix-section security">
<h1>Security and privacy is important to us </h1>
<p>Please read the Google</p>
<label class="control control--checkbox m-t-45">I confirm that I have read, understood and agree to
the above
<input type="checkbox" ng-model="terms.agreed"/>
<div class="control__indicator"></div>
</label>
<span class="error" ng-if="showError">Please select checkbox</span>
</section>
<div class="clear"></div>
<div class="button-ctr">
<button class="button" ng-class="terms.agreed ? 'active' : 'disable'" ng-click="proceed()">Agree</button>
</div>
</main>
</section>
</div>
</div>
<div id="loading" ng-if="showLoader">
<img src="images/loader.gif" id="loading-image">
</div>
My controller code is given below
.controller('agreementCtrl', ['$rootScope', '$scope', '$state', '$window', 'globalService', 'dataServices', function ($rootScope, $scope, $state, $window, globalService, dataServices) {
$scope.terms = {
agreed: false
}
$scope.showLoader = false;
$scope.proceed = function () {
if (!$scope.terms.agreed) {
$scope.showError = true;
return;
}
$scope.showLoader = true;
}
}
So I want that when anyone click on Google link only after that my checkbox has to be enable.
You can have an variable and an event handler function in the controller like
$scope.isLinkClicked = false;
$scope.onLinkClick = function(){
$scope.isLinkClicked = true;
}
And on the a attach an event handler and use ng-disabled directive on the input
<a href="https://www.google.com" target="_blank" ng-click="onLinkClick()" >Google</a>
<input type="checkbox" ng-model="terms.agreed" ng-disabled="!isLinkClicked"/>
Working example
var app = angular.module('app', []);
app.controller('MyCtrl', ['$scope', function($scope){
$scope.isLinkClicked = false;
$scope.onLinkClick = function(){
$scope.isLinkClicked = true;
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<a href="https://www.google.com" target="_blank" ng-click="onLinkClick()" >Google</a>
<input type="checkbox" ng-model="terms.agreed" ng-disabled="!isLinkClicked"/>
</div>
So the title kinda says it all...
I want to use a materialize modal created by angular, only problem I got is it won't initialize correctly. Someone got a sollution?
The angular that gives me an object with values.
$http.get("../functions/getList.php")
.success(function (response) {
$scope.lists = response;
});
The HTML where I use the modal from materalizecss
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Add Item to list: <!--list name hier--></h4>
<form>
<div class="row">
<div class="input-field col s12">
<label for="item-name">Item Name</label>
<input type="text" name="item-name" ng-model="itemName" id="item-name">
</div>
</div>
<div class="row">
<div class="input-field col s12">
<label for="item-description">Item Description</label>
<input type="text" name="item-description" ng-model="itemDescription" id="item-description">
</div>
</div>
</form>
</div>
<div class="modal-footer">
Add item
</div>
</div>
getList.php
$smt = $dbh->prepare("SELECT lists.name, lists.description, lists.deadline, lists.id FROM users INNER JOIN lists ON (users.id = lists.user_id) AND users.id = ?");
$smt->execute(array(
$user
));
$result = $smt->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($result);
print_r($json);
All you need to do is:
First:
Add this script to controller, to initialize materialize modal
$(document).ready(function(){
$('.modal').modal();
});
Example:
var myApp = angular.module('myApp',[]);
myApp.controller('TestController', ['$scope', function($scope) {
//initialize materialize modal
$(document).ready(function(){
$('.modal').modal();
});
}]);
Next: (Optional)
Use this line if you want to call the model programmatically
$('#modal1').modal('open'); //when you want to open modals programatically
Example:
$http.get("../functions/getList.php")
.success(function (response) {
$scope.lists = response;
$('#modal1').modal('open');
});
Next: (Optional)
Use "data-target" if you want to display modal on button click.. when using "ng-route" because href won't work because it will affect the ng-route and simply start redirecting pages
data-target="modal1" //instead of href="#modal1"
Example:
<button data-target="modal1" class="btn">Display My Modal</button>
Demo Here
var myApp = angular.module('myApp',[]);
var testController = function($scope, $http){
$(document).ready(function(){
$('.modal').modal();
});
$scope.clicked = function(){
$('#modal1').modal('open');
}
}
myApp.controller("testController",testController);
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script data-require="angular.js#~1.2.2" data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<div ng-app ng-controller="testController">
<button data-target="modal1" class="btn">Click Me</button>
<button ng-click="clicked()" class="btn">ng-Click</button>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>My Modal</h4>
</div>
<div class="modal-footer">
<a class=" modal-action modal-close waves-effect waves-green btn-flat" ng-click="createItem()">close</a>
</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>