I am trying to add a second input to an angular material dialog, but I am not sure if it is possible. I tried to add the Test2 placeholder but didn't work. Thank you for the help in advance.
$scope.showPrompt = function (ev) {
$scope.statusTopic = '';
var confirm = $mdDialog.prompt()
.title('Test?')
.placeholder('Test1')
//.placeholder('Test2')
.targetEvent(ev)
.ok('Okay!')
.cancel('Cancel');
Here's an example using Custom Dialog - CodePen
Markup
<div ng-controller="MyController as vm" ng-cloak="" ng-app="app">
<md-button class="md-primary md-raised" ng-click="vm.open($event)">
Custom Dialog
</md-button>
<div ng-if="vm.showText" layout="column">
{{vm.placeholder1}}
<br>
{{vm.placeholder2}}
</div>
<script type="text/ng-template" id="test.html">
<md-dialog aria-label="Test">
<div layout-padding layout="column">
<md-input-container>
<label>Placeholder 1</label>
<input ng-model="vm.placeholder1">
</md-input-container>
<md-input-container>
<label>Placeholder 2</label>
<input ng-model="vm.placeholder2">
</md-input-container>
<md-button ng-click="vm.save()" class="md-primary">Save</md-button>
</div>
</md-dialog>
</script>
</div>
JS
angular.module('app',['ngMaterial'])
.controller('MyController', function($scope, $mdDialog) {
this.open = function(ev) {
this.showText = false;
$mdDialog.show(
{
templateUrl: "test.html",
clickOutsideToClose: true,
scope: $scope,
preserveScope: true,
controller: function($scope) {
},
});
};
this.save = function () {
this.showText = true;
$mdDialog.cancel();
}
})
Demo:
https://material.angularjs.org/latest/demo/input
Docs:
https://material.angularjs.org/latest/api/directive/mdDialog
https://material.angularjs.org/latest/api/service/$mdDialog
Related
I'm working on a project using angularJS material. I'm calling a directive(<sdiv-panel></sdiv-panel>) two time in a DOM but the problem is if I modify some element in the HTML of the directive, the second call of the same directive return a new HTML.
How can I solve this?
I'm looking for solutions that makes me call the directive with all the changes in the HTML page belongs to the directive that i call.
My code:
<md-content style="height:-webkit-calc(100% - 64px)" flex class="stop-scrolling" md-theme="{{vm.contentTheme}}" md-theme-watch="true">
<div style="height:-webkit-calc(50%)" layout="column" ng-repeat="cardrow in vm.cards" ng-show="vm.multipleview">
<div flex layout="row" layout-fill>
<md-card class="card" ng-repeat="card in cardrow" >
<md-toolbar style="min-height:35px; height:40px" class="md-hue-1" ng-dblclick="vm.openFromLeft()">
<div class="md-toolbar-tools">
<h1 >{{card.view.name }}</h1>
<md-menu >
<md-button ng-click="$mdOpenMenu($event)" class="md-icon-button" aria-label="More">
<i class="material-icons">more_vert</i>
</md-button>
<md-menu-content >
<md-menu-item ng-repeat="view in vm.views" >
<md-button ng-click="card.view=view" class="md-hue-2" >{{view.name}}</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</md-toolbar>
<md-card-content flex class="cardcontent" >
<sdiv-panel card={{card.view.element}} view={{card.name}}_4 >
</sdiv-panel>
</md-card-content>
</md-card>
</div>
</div>
<div ng-hide="vm.multipleview" >
<md-content layout-fill>
<md-tabs md-dynamic-height md-border-bottom >
<div ng-repeat="cardrow in vm.cards">
<md-tab ng-repeat="card in cardrow " label="{{ card.view.name }}">
<!--<md-tab ng-repeat="card in vm.tabtable " label="{{ card.name }}">-->
<md-content layout-fill="" flex="" style="margin-top: 10px" >
<div style="margin-bottom: 10px" >
<sdiv-panel card={{card.view.element}} view={{card.name}}_1 ></sdiv-panel>
</div>
</md-content>
</md-tab>
</div>
</md-tabs>
</md-content>
</div>
</md-content>
Here is my directive :
(function() {
'use strict';
angular.module('sdivMaterial.panel')
.directive(
'sdivPanel', function($compile) {
return {
restrict: "E",
replace: false,
scope : {
card: "#",
view:"#"
},
template: "",
link: function postLink($scope, $element, $attr) {
$attr.$observe('card', function(data) {
console.log("Updated data ", $scope.card, " : ", $scope.view);
var html = $scope.card;
$element.html(html);
$compile($element.contents())($scope);
}, true);
}
}
})
})();
an example of my main.html :
{{card.view.name }}
more_vert
{{view.name}}
-->
Here is my directive :
(function() {'use strict';
angular.module('sdivMaterial.panel')
.directive(
'sdivPanel', function($compile) {
return {
restrict: "E",
replace: false,
scope : {
card: "#",
view:"#"
},
template: "",
link: function postLink($scope, $element, $attr) {
$attr.$observe('card', function(data) {
console.log("Updated data ", $scope.card, " : ", $scope.view);
var html = $scope.card;
$element.html(html);
$compile($element.contents())($scope);
}, true);
}
}
})
})();
I'm trying really hard, but I can't find where is my problem.
I created a custom directive and it should iterate some HTML to draw the right content on the screen.
The problem is that my ng-repeat does not iterate my array. I search on stackoverflow but what I found didn't help me.
Here is my directive (it's in an external file):
app.directive('logtab', function(){
return {
restrict: 'E',
templateUrl: 'view/templates/log-tab.html',
replace: true,
controller: ['$scope', 'api', function($scope, api) {
$scope.logState = false;
$scope.logData = [1,2,3,4];
$scope.loadLog = function() {
api.doRequest({
path : $scope.path,
method : "GET",
broadcast : BK_LOG
});
};
var bk = $scope.$on(BK_LOG, function(key, value){
$scope.logState = true;
console.log($scope.logData);
bk();
});
}]
};
});
And here is the directive HTML that will be rendered:
<md-tab ng-click="loadLog()" label="{{i18n['REVISIONS']}}">
<div layout="row" layout-align="center" layout-padding ng-show="!logState">
<div layout="column">
<div>
<md-progress-circular md-mode="indeterminate" md-diameter="130"></md-progress-circular>
</div>
<div>
{{i18n['LOG_LOAD']}}
</div>
</div>
</div>
<div layout="row" ng-show="logState" layout-padding>
<div layout="column">
<div ng-repeat="xyz in logData">
{{xyz}}
SOME CONTENT HERE
</div>
</div>
</div>
</md-tab>
Thanks in advance!
I removed other components from your directive code and kept it at bare minimum. The code is working fine as expected. Please see below.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body ng-app="myApp" >
<logtab></logtab>
<script src="angular.js" type="text/javascript "></script>
<script src="app.js" type="text/javascript "></script>
</body>
</html>
app.js
var myApp = angular.module('myApp', []);
myApp.directive('logtab', function(){
return {
restrict: 'E',
templateUrl: 'log-tab.html',
replace: true,
controller: ['$scope', function($scope) {
$scope.logState = false;
$scope.logData = [1,2,3,4];
console.log('hi');
}]
};
});
log-tab.html
<div>
{{logData}}
<div layout="row">
<div layout="column">
<div ng-repeat="xyz in logData">
{{xyz}}
</div>
</div>
</div>
</div>
Please use a couple of console.log's to identify the exact location. I suspect that there must be some thing wrong with the other parts of the directive or may be logState is set to false??
You can always separate the controller from the directive:
app.directive('logtab', function(){
return {
restrict: 'E',
templateUrl: 'view/templates/log-tab.html',
replace: true,
scope: {
log: '='
}
};
});
Then in your controller
app.controller('MyController', ['$scope', 'api', function($scope, api) {
$scope.logTab = {
state: false,
data: [1, 2, 3, 4],
loadLog: function() {
api.doRequest({
path : $scope.path,
method : "GET",
broadcast : BK_LOG
});
}
};
var bk = $scope.$on(BK_LOG, function(key, value){
$scope.logTab.state = true;
console.log($scope.logTab.data);
bk();
});
}]);
Then change your HTML to:
<md-tab ng-click="log.loadLog()" label="{{i18n['REVISIONS']}}">
<div layout="row" layout-align="center" layout-padding ng-show="!log.state">
<div layout="column">
<div>
<md-progress-circular md-mode="indeterminate" md-diameter="130"></md-progress-circular>
</div>
<div>
{{i18n['LOG_LOAD']}}
</div>
</div>
</div>
<div layout="row" ng-show="log.state" layout-padding>
<div layout="column">
<div ng-repeat="xyz in log.data">
{{xyz}}
SOME CONTENT HERE
</div>
</div>
</div>
</md-tab>
And call it with
<logtab log="logTab"></logtab>
Updated my answer based on OP's explanation.
Created a fiddle here: https://jsfiddle.net/frishi/bzbbo5da/14/
I simplified the directive definition a little, removed the api part of it.
I also changed the directive's template to include the ng-repeat part of it.
//....
restrict: 'E',
template: `<p><div ng-repeat="xyz in logData">
{{xyz}}
SOME CONTENT HERE
</div></p>`,
replace: false,
scope: true, // <- needs to be set
//....
You are missing the scope parameter in the directive definition object. You have to set it to scope: true for your directive's template to be able to access a variable defined on the directive controller's scope.
I am using ionic to make a mobile app.I want to use a popup window to collect two pieces of data, a username and a password. I looked through a lot of website, it only shows how popup window can collect one piece of data, but not two. Also, I would like to make the popup window a purple color. How can I do that?
$scope.create = function() {
$scope.data = {};
// An elaborate, custom popup
var myPopup = $ionicPopup.show({
template: '<input type="password" ng-model="data.one">',
style: 'background-color:purple;',
title: 'Enter Wi-Fi Password',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-balanced',
onTap: function(e) {
if ((!$scope.data.one)&&(!$scope.data.two)) {
e.preventDefault();
} else {
return $scope.data;
}
}
}
]
});
}
You can achieve this using $ionicModal
Here is a working example
HTML
<script id="add-or-edit-cart.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">{{ action }} Page</h1>
<div class="buttons">
<button ng-click="deleteCart()" class="button button-icon icon ion-close"></button>
</div>
</ion-header-bar>
<ion-content>
<div class="list list-inset">
<label class="item item-input">
Dummy Text
</label>
</div>
</ion-content>
</ion-modal-view>
</script>
Add ng-click to the View cart present in the footer
<ion-footer-bar class="bar-footer btn-footer bar-light">
<div class="row">
<div class="col">
<button ng-click="vm.showCart()" ng-controller="OverviewController as vm" class="button button-block button-positive"> View cart Page </button>
</div>
<div class="col">
<button class="button button-block button-calm"> View checkout page </button>
</div>
</div>
</ion-footer-bar>
JS
Add the Following Controller
.controller('OverviewController', function ($scope, $ionicModal) {
var vm = this;
$ionicModal.fromTemplateUrl('add-or-edit-cart.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal;
});
vm.showCart = function () {
$scope.Cart = {};
$scope.action = 'Cart';
$scope.isAdd = true;
$scope.modal.show();
};
$scope.deleteCart = function () {
$scope.modal.hide();
};
$scope.$on('$destroy', function () {
$scope.modal.remove();
});
return vm;
and here is working CodePen
I'm making a website using angular-material. There is a sidenav and a button. Whenever the sidenav toggles, I want the button to changes it's theme. Like, when the sidenav is open, the button's md-theme attribute is set to "cyan" and when sidenav is close, the button is set to another theme.
My html code:
<div ng-app="app" ng-controller="navCtrl" layout="column">
<section layout="row" flex>
<md-content flex class="md-padding">
<div layout="column" layout-fill layout-align="center center">
<md-button class="md-fab md-primary" md-theme="cyan" ng-click="toggle()" aria-lebel="Navicon">
<md-icon class=""></md-icon>
</md-button>
</div>
</md-content>
<md-sidenav class="md-sidenav-left" md-component-id="nav"></md-sidenav>
</section>
</div>
And my controller:
angular.module('app', ['ngMaterial'])
.controller('navCtrl', function($scope, $timeout, $mdSidenav) {
$scope.toggle = function() {
$mdSidenav('nav').toggle();
};
});
I couldn't find a way to listen to this toggling and change the theme.
The directive supports a md-is-open attribute that identifies a $scope or controller attribute value that is updated when the sidenav state is changed ( open <-> closed ).
Then, the $mdSidenav('nav').toggle() function returns a promise, so define the 'then' to set a 'theme' attribute in your controller that is referenced from the md-theme in your side-nav markup:
<md-button class="md-fab md-primary"
ng-click="toggle()" aria-label="Navicon"
md-theme="buttonTheme" >
...
<md-sidenav class="md-sidenav-left" md-component-id="nav"
md-is-open="isOpen"></md-sidenav>
...
angular.module('app', ['ngMaterial'])
.controller('navCtrl', function($scope, $timeout, $mdSidenav) {
$scope.isOpen = false;
$scope.buttonTheme = 'cyan';
$scope.toggle = function() {
$mdSidenav('nav').toggle().then( function() {
$scope.buttonTheme = ($scope.isOpen ? 'indigo' : 'cyan');
});
};
});
I am new to Ionic and AugularJS and I am having a problem opening up a modal box upon click on a checkbox/radio button on the third option for hashtag search in the settings page. I have included an ng-controller and ng-click to take action. I looked in the debugger and it displayed an error:
GET http://localhost:8100/hashtag-modal [HTTP/1.1 404 Not Found 1ms]
I know that 404 Not Found means it didn't find the templateUrl but every nav page I have is in the index.html and they work fine except hashtag-modal.html in the app.js file. Why isn't it working and how do I resolve this issue?
app.js
// Navigation pages
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: '/index',
templateUrl: 'index.html'
})
.state('about', {
url: '/about',
templateUrl: 'about.html'
})
.state('settings', {
url: '/settings',
templateUrl: 'settings.html'
})
.state('hashtag-modal', {
url: '/hashtag-modal',
templateUrl: 'hashtag-modal',
controller: 'hashtag-modalCtrl'
})
$urlRouterProvider.otherwise("/index"); // if no url found, go back to index
})
// Hashtag Search option
app.controller('hashtagController', ['$scope', function($scope)
{
$scope.hashtagValue = 'Search'; // default value
$scope.hashtag = function()
{
$scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value
};
}]);
// hashtag search modal
app.controller('hashtag-modalCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('hashtag-modal.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
});
index.html
<!-- SETTINGS -->
<script id="settings.html" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view title="Settings" hide-back-button="false">
<ion-content class="padding">
<!-- The content of the page -->
<p>Check one of the options below to set how you wish to categorize and view your Instagram photos.
</p>
<div class="settings-list">
<label class="item item-radio">
<input type="radio" name="settings-group" value="recent">
<div class="item-content">
Recent
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="settings-group" value="popular">
<div class="item-content">
Most Popular
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();modal.show();">
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span id="hashtagInput">{{hashtagValue}}</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
</ion-content>
</ion-view>
</script>
<!-- HASHTAG SEARCH MODAL -->
<script id="hashtag-modal.html" type="text/ng-template">
<ion-modal-view hide-back-button="false">
<ion-header-bar>
<h1 class="title">Hashtag Search</h1>
</ion-header-bar>
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
</ion-content>
</ion-modal-view>
</script>
Revised app.js
I added an $ionicModal to the hashtagController but it is said Error: $ionicModal is undefined. Where else is it undefined?
// Hashtag Search option
app.controller('hashtagController', ['$scope', function($scope, $ionicModal)
{
$scope.hashtagValue = 'Search'; // default value
$scope.hashtag = function()
{
$scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value
$ionicModal.fromTemplateUrl('hashtag-modal.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
}
}]);
Revised label
<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();">
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span id="hashtagInput">{{hashtagValue}}</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
ionic modal has nothing to do with routes.
You just load a static html template from server, and that same html is shown in ionic modal with all the bindings.
Instead of declaring a seperate controller, move it inside the same controller :
app.controller('hashtagController', ['$scope', function($scope, $ionicModal) {
$scope.hashtag = function() {
$scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value
$ionicModal.fromTemplateUrl('hashtag-modal.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
});
};
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
$scope.$on('modal.hidden', function() {
// Execute action
});
$scope.$on('modal.removed', function() {
// Execute action
});
}
Then in your HTML :
<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();">
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span id="hashtagInput">{{hashtagValue}}</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
Ionic has a nice codepen example showing how to open a modal with an ng-click
http://codepen.io/ionic/pen/gblny