I am unable to check/uncheck a radio button inside Accordion widget.
Here is my code:
<SCRIPT LANGUAGE="JavaScript">
$(function() {
$( "#accordion" ).accordion();
});
</SCRIPT>
<div id="accordion" >
<input type="radio" id="worddoc" name="submissionType">Upload Word
<div>
<input type="file"/>
</div>
<input type="radio" id="pdfdoc" name="submissionType">Upload Pdf
<div>
<input type="file"/>
</div>
</div>
Check this
<SCRIPT LANGUAGE="JavaScript">
$(function() {
$( "#accordion" ).accordion();
});
</SCRIPT>
<div id="accordion" >
<div>
<input type="radio" id="worddoc" name="submissionType"> Upload Word
<input type="file"/>
</div>
<div>
<input type="radio" id="pdfdoc" name="submissionType">Upload Pdf
<input type="file"/>
</div>
</div>
You just need to add headers for each accordion option, like so:
<div id="accordion" >
<h1>Option 1</h1>
<div>
<input type="radio" id="worddoc" name="submissionType" /> Upload Word
<input type="file"/>
</div>
<h1>Option 2</h1>
<div>
<input type="radio" id="pdfdoc" name="submissionType" />Upload Pdf
<input type="file"/>
</div>
</div>
<script>
$(function() {
$("#accordion").accordion();
});
</script>
See this JSFiddle. Let me know if this is not what you mean.
Related
I want to show only clicked event field, but it was showing multiple views on each click event.
'use strict';
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope){
$scope.fieldCollectionSingle = [];
$scope.selectSingle = function (fieldkey, field) {
$scope.showSingle_Fieldsettings = true;
};
$scope.showSingle = function (fieldkey, field, index) {
return angular.equals(shownSingle, field, index);
};
$scope.removeName = function (fieldkey) {
$scope.fieldCollectionSingle.splice(fieldkey, 1);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="AppCtrl">
<button class="form-control" ng-click="fieldCollectionSingle.push([])">Single Line Text</button><br/>
<fieldset ng-click="selectSingle()" class="ui-state-default" ng-repeat="(fieldkey, field) in
fieldCollectionSingle">
<label>{{field.single}}</label>
<input type="text" id = "abc{{fieldkey}}" class="form-control" placeholder="Enter name">
<button class="remove" ng-click="removeName($fieldkey)">-</button>
</fieldset>
<div ng-repeat="(fieldkey, field) in fieldCollectionSingle" class="form-group" ng-show="showSingle_Fieldsettings">
<label>Field Label(?)</label><br/>
<fieldset>
<input ng-model="field.single" ng-click="setLabel(fieldkey)" class="fieldLabel">
</fieldset>
</div>
</div>
</div>
[1]: http://jsfiddle.net/vijjusena/17cc74g0/2/ [this is mycode jsfiddle]
At-last I understood your requirement and edited you JSFiddle to create exactly what you wanted. I have changed few things, but I hope you can understand all of them. If something gets you stuck, ask me.
Important: You will have to click on "Default title" text to show the other form to change/update the title.
Here is the JSFiddle. Good luck, have fun!
<div ng-app="myApp">
<div ng-controller="AppCtrl">
<button class="form-control" ng-click="addNewField()">Single Line Text</button>
<fieldset class="ui-state-default" ng-repeat="(fieldkey, field) in fieldCollectionSingle">
<label ng-click="selectSingle(field)">{{ field.label }} : </label>
<input type="text" ng-model="field.value" class="form-control" placeholder="Enter name">
<button class="remove" ng-click="removeName($fieldkey)">-</button>
</fieldset>
<div class="form-group" ng-show="showSingle_Fieldsettings">
<label>Field Label(?)</label>
<fieldset>
<input ng-model="selectedField.label" class="fieldLabel">
</fieldset>
</div>
</div>
</div>
I'm seeing weird flickering when mousing over the ng-clip enhanced button. I've got the ng-clip enhanced button being shown/hid when the enclosing div is moused over. As the user moves the mouse over the button, it flickers. I'm assuming it's something to do with event handling between Zeroclipboard and the Angular code?
Here is a Plunker page displaying the issue: http://plnkr.co/4gFy9U
The code from Plunker:
<!doctype html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js"></script>
<script src="//rawgit.com/asafdav/ng-clip/master/src/ngClip.js"></script>
</head>
<body>
<div ng-app="myapp">
<div class="container" ng-controller="myctrl" ng-mouseover="isHovering = true" ng-mouseout="isHovering = false">
<div class="page-header">
<h1>ngClip <small>example</small></h1>
</div>
<form>
<div style="background:red;" class="form-group">
<label >Copy #1</label>
<input type="text" class="form-control" placeholder="Enter text to copy" ng-model="copy1">
<button ng-if="isHovering" class="btn btn-default" clip-copy="copy1">Copy!</button>
</div>
<br/><br/><br/>
<textarea class="form-control" rows="3" placeholder="paste here"></textarea>
</form>
</div>
</div>
<script>
var myapp = angular.module('myapp', ["ngClipboard"]);
myapp.config(['ngClipProvider', function(ngClipProvider) {
ngClipProvider.setPath("//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.swf");
ngClipProvider.setConfig({
bubbleEvents: false
})
}]);
myapp.controller('myctrl', function ($scope) {
$scope.fallback = function(copy) {
window.prompt('Press cmd+c to copy the text below.', copy);
};
$scope.showMessage = function() {
console.log("clip-click works!");
};
});
</script>
</body >
</html>
I was also having this issue. I fixed by using ng-mouseenter on an outer div instead of using ng-mouseover and ng-mouseleave on an inner div instead of ng-mouseout. No flicker!
So:
<div ng-app="myapp" ng-mouseenter="isHovering = true">
<div class="container" ng-controller="myctrl" ng-mouseleave="isHovering = false">
<div class="page-header">
<h1>ngClip <small>example</small></h1>
</div>
<form>
<div style="background:red;" class="form-group">
<label >Copy #1</label>
<input type="text" class="form-control" placeholder="Enter text to copy" ng-model="copy1">
<button ng-if="isHovering" class="btn btn-default" clip-copy="copy1">Copy!</button>
</div>
<br/><br/><br/>
<textarea class="form-control" rows="3" placeholder="paste here"></textarea>
</form>
</div>
</div>
I hide a div in the second form and the third form if the first form is valid. The idea is that when you click on the submit button and if this is valid hide this element.
<div class="cover" ng-hide ="form.shipping.$valid"/>
I am not very clear yet how the logic works Angular these cases, if someone here can give me an idea would appreciate.
Example the my code:
(function() {
'use strict';
var checkOut = angular
.module('checkOutPageApp', [
'ngResource',
'ngAnimate',
'ngMessages'
]);
// Global controller
checkOut.controller('globalCtrl', function($scope, $locale) {
$scope.areaStatus = false;
$scope.disabled = function() {
if ($scope.shipping.$valid) {
return true;
} else {
return false
}
}
});
// Controller for form Shipping address
checkOut.controller('CheckoutShippingCtrl', ['$scope', '$http', '$location',
function($scope, $http, $location) {
this.data = {};
var self = this;
this.submit = function(valid) {
$scope.areaStatus = false;
if (!valid) {
return;
}
self.submitting = true;
$http.post('', self.data).then(function() {
self.data = [];
$location.path('/completed');
}, function(response) {
self.submitting = false;
});
};
}
]);
}(window, window.angular));
<div class="modifyAddressShipping" ng-controller="CheckoutShippingCtrl as form">
<form id="shipping" class="shipping" name="shipping" novalidate ng-submit="form.submit(shipping.$valid)" ng-class="{'loading': form.submitting, 'is-el-dirty' : shipping.$dirty || shipping.dirty}">
<fieldset class="billing reset-style">
<div id="shipping_address" class="group-items-form active">
<div class="row collapse">
<div class="row">
<!-- / .items-form -->
<div class="large-12 columns items-form">
<label>
<input class="field field-chk" type="text" name="name" placeholder="Name" ng-model="form.data.name" required/>
</label>
<div class="error" ng-if="shipping.$submitted || shipping.name.$touched" ng-messages="shipping.name.$error">
<p class="text-msg" ng-message="required">You did not enter your name</p>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<div class="chk-box">
<div class="large-24 column box-chk-btn chk-btn-sm">
<button ng-click="areaStatus = !areaStatus" type="submit" class="chk-btn button-cta" data-ng-disabled="shipping.$invalid">
Next
</button>
</div>
</div>
</form>
</div>
<div class="delivery-payment-card-chk">
<form id="delivery_payment_form" novalidate name="formDelivery" class="min-h-3333" data-ng-submit="deliveryForm(formDelivery.$valid)">
<fieldset class="billing reset-style">
<div id="delivery_payment" class="group-items-form">
<div class="large-24 column items-form">
<label for="delivery1">
<input name="delivery" type="radio" id="delivery1" checked>2nd Class Delivery</label>
<label for="delivery2">
<input name="delivery" type="radio" id="delivery2">Click & Collect</label>
<label for="delivery3">
<input name="delivery" type="radio" id="delivery3">48 Hour</label>
<label for="delivery4">
<input name="delivery" type="radio" id="delivery4">Next Working Day</label>
<label for="delivery5">
<input name="delivery" type="radio" id="delivery5">Saturday Courier Delivery</label>
<!-- / label -->
</div>
<!-- / .items-form -->
</div>
</fieldset>
<div class="chk-box">
<div class="large-24 column box-chk-btn chk-btn-sm">
<button class="chk-btn button-cta" data-ng-disabled="disabled">
Next
</button>
</div>
</div>
</form>
</div>
<div class="sd-delivery-payment-card-chk" ng-controller="CheckoutPaymentCtrl as form">
<form name="checkoutPayment" novalidate class="min-h-3333" ng-submit="form.submit(checkoutPayment.$valid)" ng-class="{loading:form.submitting}">
<fieldset class="sd-billing reset-style">
<div id="delivery_payment" class="sd-group-items-form">
<div class="large-24 columns items-form">
<label>
<input class="sd-field field-chk" type="text" ng-disabled="disabled" name="name" placeholder="Name" ng-model="form.data.name" required></input>
</label>
<div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.name.$touched" ng-messages="checkoutPayment.name.$error">
<p class="text-msg" ng-message="required">You did not enter your name</p>
</div>
</div>
<!-- / .sd-items-form -->
<div class="large-24 columns items-form">
<label>
<input type="text" id="card_number" name="cardnumber" card-data-type autocomplete="off" size="19" ng-minlength="15" maxlength="19" nd-disabled="" class="sd-field" placeholder="XXXX XXXX XXXX XXXX" ng-class="(form.data.cardnumber | checkcreditcard)" ng-model="form.data.cardnumber"
required>
<small class="checkCard" ng-class="(form.data.cardnumber | checkcreditcard)"></small>
</label>
<div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.cardnumber.$touched" ng-messages="checkoutPayment.cardnumber.$error">
<p class="text-msg" ng-message="required">You did not enter your card number</p>
</div>
</div>
<!-- / .sd-items-form -->
<div class="large-6 columns items-form">
<label>
<input id="expiry_date" maxlength="5" name="datacard" card-data-expiration ng-disabled="" class="sd-field txt-center p-l-0" ng-model="form.data.datacard" type="text" type placeholder="MM / YY" required></input>
</label>
<div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.datacard.$touched" ng-messages="checkoutPayment.datacard.$error">
<p class="text-msg" ng-message="required">Not valid date credit card</p>
</div>
</div>
<!-- / .sd-items-form -->
<div class="large-5 columns items-form">
<label>
<input name="cvv" class="sd-field txt-center p-l-0" ng-disabled="disabled" maxlength="4" ng-minlength="3" type="text" ng-pattern="/^[0-9]+$/" placeholder="CVV" ng-model="form.data.cvv" required></input>
</label>
<div class="error" ng-if="checkoutPayment.$submitted || checkoutPayment.cvv.$touched" ng-messages="checkoutPayment.cvv.$error">
<p class="text-msg" ng-message="required">Security code required</p>
</div>
<div class="error" ng-show="checkoutPayment.cvv.$error.pattern">
<p class="text-msg">Security code must contain only numbers</p>
</div>
<div class="error" ng-show="checkoutPayment.cvv.$error.minlength">
<p class="text-msg">Security code must be 3-4 digits</p>
</div>
</div>
<!-- / .sd-items-form -->
</div>
</div>
</fieldset>
<div class="sd-chk-box">
<div class="large-24 column box-chk-btn chk-btn-sm">
<button type="submit" class="sd-chk-btn button-cta" ng-disabled="!checkoutPayment.$invalid">
Place order
</button>
</div>
</div>
</form>
</div>
The following hides a form when the submit button has been pressed ONLY IF the form submitted is $valid. To work between controllers I created a variable on $rootScope to flag if the form is valid or invalid. It may be more correct to use a getter and setter function and store the variable in a service.
INDEX.HTML
<!DOCTYPE html>
<html lang="en" ng-app="msgApp">
<head>
<meta charset="utf-8"/>
</head>
<body ng-controller="MainCtrl">
<div ng-show="form1Done" ng-hide="!form1Done">
<h2>The Form has not disappeared</h2>
</div>
<div ng-show="!form1Done" ng-hide="form1Done">
<h2>The Form</h2>
<form name="userForm">
<div class="field">
<label for="userName">Enter your userName:</label>
<input type="text" name="userName" ng-model="data.userName"
ng-minlength="5" ng-maxlength="30" required />
<div ng-messages="userForm.userName.$error" ng-messages-multiple>
<!-- the required message -->
<div ng-message="required">Please enter username</div>
<div ng-message="minlength">Username is too short</div>
<div ng-message="maxlength">Username is too long</div>
<div ng-message="userName">Error with username</div>
</div>
</div>
<button type="submit" ng-click="clickBtn(userForm.$valid)">Submit</button>
</form>
</div>
<script src="http://code.angularjs.org/1.3.6/angular.js"></script>
<script src="http://code.angularjs.org/1.3.6/angular-messages.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
APP.JS
angular.module('msgApp', ['ngMessages', 'msgApp.controllers'])
.run(function($rootScope) {
$rootScope.form1Done = false;
});
CONTROLLERS.JS
angular.module('msgApp.controllers', [] )
.controller('MainCtrl', function($scope, $rootScope) {
$scope.clickBtn = function(form) {
//valid form
if(form == true) {
console.log("Form is valid, $rootScope.form1Done= "+$rootScope.form1Done);
$rootScope.form1Done = true;
}
//invalid form
if(form == false) {
$rootScope.form1Done = false;
console.log("Form is invalid, $rootScope.form1Done= "+$rootScope.form1Done);
}
}
});
I have the following code:
<div id="messageArea">
<div ng-messages="text1.$error">
<div ng-message="required">
Text1 is required ...
</div>
</div>
<div ng-messages="text2.$error">
<div ng-message="required">
Text2 is required ...
</div>
</div>
<div ng-messages="text3.$error">
<div ng-message="required">
Text3 is required ...
</div>
</div>
</div>
<div>Text1<input id="text1" ng-model="text1" name="text1" ng-required="true"></div>
<div>Text2<input id="text2" ng-model="text2" name="text2" ng-required="true"></div>
<div>Text3<input id="text3" ng-model="text3" name="text3" ng-required="true"></div>
I wanted to show one error message at a time. When the first error is solved then the next error message will show. Anyone has any idea how I can do this? Thanks.
Nice solution is use CSS and ng-class
var app = angular.module('app', ['ngMessages']);
.error-wrapper {
color: red;
}
.error-wrapper > .view {
display: block;
}
.error-wrapper > .view ~ .view{
display: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-messages.min.js"></script>
</head>
<body ng-app="app">
<form ng-submit="createWallet()" name='testForm' novalidate>
<div>
<input ng-model='text1' type="text" name='text1' placeholder='text1' required>
</div>
<div>
<input ng-model='text2' type="text" name='text2' placeholder='text2' required>
</div>
<div>
<input ng-model='text3' type="text" name='text3' placeholder='text3' required>
</div>
<div class="error-wrapper">
<div ng-class="{ view: testForm.text1.$invalid }" class="error" ng-messages="testForm.text1.$error">
<div ng-message='required'>Text1 required</div>
</div>
<div ng-class="{ view: testForm.text2.$invalid }" class="error" ng-messages="testForm.text2.$error">
<div ng-message='required'>Text2 required</div>
</div>
<div ng-class="{ view: testForm.text3.$invalid }" class="error" ng-messages="testForm.text3.$error">
<div ng-message='required'>Text3 required</div>
</div>
</div>
<button>Submit</button>
</form>
</body>
</html>
It's show only the first error message with class .view, at the plunker http://plnkr.co/edit/kBSpRJLs6QA2D0jctKXB?p=preview
If you wrap the inputs in a form tag with an ID you can use ng-messages on the form to pick up errors from all the inputs. You can see this here: http://jsbin.com/tikufuvawe/2/edit.
<form name="userDetails">
<input name="userName" type="number" ng-model="number" required ng-maxlength="2" />
<textarea name="text" type="text" ng-model="text" required></textarea>
<div ng-messages="userDetails.$error">
<div ng-message="required">This is required</div>
</div>
</form>
EDIT:
I have updated my example http://jsbin.com/zadojamifo/3/edit using ng-show to hide other errors such that only one will show at a time. Its not a great solution but works for the situation described.
<div ng-messages="userDetails.number.$error">
<div ng-message="required">number is required</div>
</div>
<div ng-messages="userDetails.text.$error" ng-show="!userDetails.number.$error.required">
<div ng-message="required">text is required</div>
</div>
<div ng-messages="userDetails.other.$error" ng-show="!userDetails.number.$error.required && !userDetails.text.$error.required">
<div ng-message="required">other is required</div>
</div>
As you can see the ng-show will get bigger and bigger in size if more validation types are added and if more controls are added that require validation.
Maybe is too late but this is my solution, use ng-messages-multiple to show one or more message, angular respect the order of validation messages:
<form name="loginForm" ng-submit="login()">
<label>Email</label>
<input required name="email" type="email" ng-model="email">
<div ng-messages="loginForm.email.$error" ng-show="loginForm.email.$dirty && loginForm.email.$invalid" ng-messages-multiple>
<div ng-message="required">El email es requerido!</div>
<div ng-message="email">El email debe cumplir con el formato: email#dominio.com!</div>
</div>
<label>Contraseña</label>
<input required name="password" type="password" ng-model="password" ng-pattern="passwordPattern" md-maxlength="12">
<div ng-messages="loginForm.password.$error" ng-show="loginForm.password.$dirty && loginForm.password.$invalid">
<div ng-message="required">La contraseña es requerida!</div>
<div ng-message="pattern">Se requieren de 6 a 12 caracteres, por lo menus un dígito, una letra mayuscula y una minúscula</div>
</div>
<div layout="row" layout-align="center center">
<button ng-disabled="loginForm.$invalid>Login</button>
</div>
</form>
You can do something like this
<div id="messageArea">
<div ng-messages="number.$error">
<div ng-message="required">
Number is required ...
</div>
</div>
<div ng-messages="text.$error" ng-if="!number.$error">
<div ng-message="required">
Text is required ...
</div>
</div>
In this case you show the second block of messages only if the first one does not exists (and it's hidden if number.$errors exists)
This sample (http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html) uses a follow solution:
<div ng-messages="my_form.first_name.$error"
ng-if="interacted(my_form.first_name)">
$scope.submitted = false;
$scope.submit = function() {
$scope.submitted = true;
};
$scope.interacted = function(field) {
return $scope.submitted || field.$dirty;
};
If you don't want to show on page load but either on page submit or on change of value then use
<form name="frmSome">
<div ng-messages="userDetails.$error"
ng-if='frmSome.userName.$dirty || frmSome.$submitted'>
<span ng-message="required">Name is Required</span>
<span ng-message="maxlength">Max. 100</span>
</div>
<input name="userName" type="text"
ng-model="model.name"
ng-required='true'
ng-maxlength="30" />
..............................
..............................
<input type='submit' value='Submit' />
</form>
If you touch the text box it will be "dirty"
if try to submit the page "Submitted"
It works on the name not the model
I am really new in AngularJS but I have to make a web app using it, I have some input that control the style of an element (width, height, name, description and color) on the left side of my HTML. I used to had all elements hidden, when the user clicked it appeared and everything worked good, now I started using ui-router, if you click the 'Fullscreen' it will call thet html file. Some inputs work except the one I defined an initial scope value.
I leave a plunker so you can have an idea of what's going on.
http://plnkr.co/edit/jJTcZQb4lzZeAtNl7YZ1?p=preview
The main HTML:
<!doctype html>
<html lang="en" ng-app="bmiChatbuilder">
<head>
<meta charset="UTF-8">
<title>ChatBuilder</title>
<!-- Adding Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/default.css">
<link rel="stylesheet" href="assets/css/colpick.css">
</head>
<body ng-controller="myCtrl">
<div >
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div>
<h3>Select your chat</h3>
<a ui-sref="fullscreen">Fullscreen</a>
<a ui-sref="chatbanner">ChatBanner</a>
<h3>Set your chat options</h3>
<label>Name:</label> <br>
<input type="text" ng-model="chatName" > <br>
<p>{{chatName}}</p>
<label>Description:</label> <br>
<input type="text" ng-model="chatDes" > <br>
<label>Width:</label> <br>
<input type="text" ng-model="myWidth"> <br>
<label>Height:</label> <br>
<input type="text" ng-model="myHeight"> <br>
<h3>Style your chat</h3>
<label>Header background:</label> <br>
<input type="text" class="color {hash:true}" ng-model="myBackground"> <br>
<label>Text color header:</label> <br>
<input type="text" class="color {hash:true}" ng-model="myColor"> <br>
<label>Text color description:</label> <br>
<input type="text" class="color {hash:true}" ng-model="myColordes"> <br>
<h3>Social media</h3>
<p>Want to add social media?</p>
<input type="checkbox" ng-model="showsocialpanel"/>
<label>Yes</label>
<input type="checkbox"/>
<label>No</label> <br/>
<div ng-show="showsocialpanel">
<h3>Style your footer:</h3>
<label>Powered By:</label> <br/>
<input type="text" ng-model="poweredBy"/> <br/>
<label>Your background footer:</label> <br/>
<input type="text" class="color {hash:true}" ng-model="mySocialbg"/> <br/>
<h3>Add your social</h3>
<input type="checkbox" ng-model="facebookiconshow"/><label>Facebook</label> <br/>
<input type="text" ng-show="facebookiconshow" ng-model="facebooklink"placeholder="http://www.facebook.com"/>
<br/>
<input type="checkbox" ng-model="twittericonshow"/><label>Twitter</label> <br/>
<input type="text" ng-show="twittericonshow" ng-model="twitterlink"placeholder="http://www.twitter.com"/>
<br/>
<input type="checkbox" ng-model="linkediniconshow"/><label>Linkedin</label><br/>
<input type="text" ng-show="linkediniconshow" ng-model="linkedinlink"placeholder="http://www.linkedin.com"/>
</div>
</div>
</div>
<div class="col-lg-10">
<div ui-view></div>
</div>
</div>
</div>
The fullscreen HTML:
<div id="chat_box" ng-style="{width:myWidth}">
<div id="chat_top">
<div id="chat_avatar">
</div>
<div id="chat_header" ng-style="{background: myBackground}">
<h4 ng-style="{color:myColor}">{{chatName}}</h4>
<p ng-style="{color:myColordes}">{{chatDes}}</p>
</div>
</div>
<div id="chat_container">
<div id="history_div" ng-style="{height:myHeight}">
<div id="history_mc">
</div>
</div>
</div>
<div id="chat_footer">
<textarea id="input_area" rows="0"
type="text" maxlength="75" onkeypress="chatHandler(event)"></textarea>
<div class="social_media" ng-show="showsocialpanel" ng-style="{background:mySocialbg}">
<ul>
<li ng-show="facebookiconshow">
<a ng-href="{{facebooklink}}" target="_blank">
<img src="assets/img/facebook.png" alt="Facebook Icon"/>
</a>
</li>
<li ng-show="twittericonshow">
<a ng-href="{{twitterlink}}" target="_blank">
<img src="assets/img/twitter.png" alt="Twitter Icon"/>
</a>
</li>
<li ng-show="linkediniconshow">
<a ng-href="{{linkedinlink}}" target="_blank">
<img src="assets/img/linkedin.png" alt="Linkedin Icon"/>
</a>
</li>
</ul>
</div>
</div>
</div>
The JS:
var bmiChatbuilder = angular.module('bmiChatbuilder', ['ui.router'])
bmiChatbuilder.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/")
$stateProvider
.state('fullscreen', {
url: "/fullscreen",
templateUrl: "fullscreen.html",
controller:"myCtrl"
})
})
bmiChatbuilder.controller('myCtrl', function ($scope) {
$scope.chatName = 'Type your text tittle here';
$scope.chatDes = 'Type your description here';
$scope.myWidth = '800px';
$scope.myHeight = '400px';
})
Thanks in advance for your help.
Router creates new myCtrl instance with it's own scope. You can create service to share data between two controllers or create another controller type for /fullscreen.