I have a very simple app that has a splitter (onsenui) menu that opens different templates from index.html.
In index.js I declare a controller that should be bound to one of the template pages in index.html. I can follow with the debugger and watch the controller code be accessed during the first time the page is loaded, I assume it is being called on initial assignment, but afterwards the method advance() is never called when the button that should call it is pressed.
The method is assigned to the button using the ng-click directive.
Everything else works, it is only the controller and onclick that is not.
index.html :
<template id="traditionalrosary.html">
<div>
<ons-page id="traditionalrosary" ng-controller="traditionalRosaryController">
<link rel="stylesheet" href="css/traditionalrosary.css">
<body>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Logo
</div>
</ons-toolbar>
<ons-card style="width:25vw; height 50vh; margin: auto;">
<img id="logoImage" class="img-responsive" src="img/logo.jpg" style='height=33vh; width=33vw; object-fit: cover; margin: auto;'>
</ons-card>
<ons-card style='left:50vh; width:75vw; height 50vh; margin: auto; object-fit: contain;'>
<textarea class="textarea" ng-model="textstuff" ng-init="textstuff = 'Hello now'" style="display: block; width: 100%; height 50vh; object-fit: contain; margin: auto; " value="OK" ' rows="10" placeholder="Textarea">
</textarea>
</ons-card>
<ons-button modifier="large" ng=click="advance()">advance</ons-button>
</body>
</ons-page>
</div>
</template>
controllers.js:
myApp.controller("traditionalRosaryController", function($scope) {
$scope.textstuff="nom nom";
$scope.advance=function()
{
$scope.textstuff="awesome";
};
});
index.js
window.fn = {};
window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};
window.fn.load = function(page) {
var content = document.getElementById('content');
var menu = document.getElementById('menu');
content.load(page)
.then(menu.close.bind(menu));
};
You have a typo in your HTML
Change ng=click="advance()" to ng-click="advance()"
Note the dash rather than the equals sign.
Related
I opened the same page in different tabs with different mode and when I pressed one of the button that should fill the inputs, the data filled in the last tab opened, not the tab that has been clicked.
The angular input:
<input type="text"
class="form-control"
id="Type"
style="width:170px;text-align:auto"
ng-model="This_Page.Data.Type"
ng-disabled="This_Page.Action == 'View'"
autocomplete="off">
code:
$scope.This_Page.Data.Type = l_Details.Type;
what should I do to ensure that every tab get only it's data?
EDIT 1:
I guess my question was not clear enough...
I have an application that is built based on TABs, each with its own controller assigned, that open upon request. Some of the tabs serve for dual behavior (same HTML, same Controller code): Create an element (e.g. User Login credentials) and Edit an element (Edit User Credentials).
The issue is that when I open two instances of the same tab, whatever I enter in one of the tabs leaks to the other instance of the same tab.
Hope this makes things clearer.
Thanks!
Use this code:
You can bind with : {{}} and in js return html with : ${}
(function () {
'use strict';
angular
.module('MyApp',['ngMaterial'])
.controller('AppCtrl', AppCtrl);
function AppCtrl ( $scope ) {
$scope.data = {
selectedIndex: 0,
firstDataSet: "First Data set",
secondDataSet: "Second Data set"
};
$scope.selectedTab = function(index) {
if(index === 'one')
return $scope.data.firstDataSet;
if(index === 'two')
return $scope.data.secondDataSet;
}
}
})();
.tabsdemoStaticTabs md-tab-content {
padding: 25px; }
.tabsdemoStaticTabs md-tab-content:nth-child(1) {
background-color: #42A5F5; }
.tabsdemoStaticTabs md-tab-content:nth-child(2) {
background-color: #689F38; }
.tabsdemoStaticTabs md-tab-content:nth-child(3) {
background-color: #26C6DA; }
.tabsdemoStaticTabs .after-tabs-area > span {
margin-top: 25px;
padding-right: 15px;
vertical-align: middle;
line-height: 30px;
height: 35px; }
.tabsdemoStaticTabs .after-tabs-area > md-checkbox {
margin-top: 26px;
margin-left: 0; }
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
<div ng-app="MyApp" class="tabsdemoStaticTabs" ng-controller="AppCtrl" ng-cloak="">
<md-content class="md-padding">
<md-tabs class="md-accent" md-selected="data.selectedIndex">
<md-tab id="1" md-on-select="resultOne = selectedTab('one')">
<md-tab-label>
<h3>My Tab content</h3>
</md-tab-label>
<md-tab-body>
<p>
{{ resultOne }}
</p>
</md-tab-body>
</md-tab>
<md-tab id="2" md-on-select="resultTwo = selectedTab('two')">
<md-tab-label>
<h3>My Tab content</h3>
</md-tab-label>
<md-tab-body>
<p>
{{ resultTwo }}
</p>
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
</div>
I am making a chat app in angular js and I have added the scroll bar to the chat area.
Here is the code:
<div class="chat active-chat" id="scrollme" >
<div class="scroll">
<div ng-repeat="c in activeConversations track by c.time| orderBy:'time':false" >
<div class="bubble" ng-class="c.type" >
{{c.message}} <br/>
<a style="color: blue;" ng-click="openFile(c.uploadedFile.fileContentType, c.uploadedFile.file)" ng-if="c.uploadedFile.file" target="_blank">{{c.uploadedFile.fileName}}
</a>
<span class="user_message">{{c.time | date:'yyyy-MM-dd HH:mm:ss'}}</span>
</div>
</div>
</div>
</div>
and css for this is:
.scroll{
overflow-y: auto;
overflow-x: hidden;
}
#scrollme{
height: 403px;
width: 498px;
padding-right: 10px;
padding-bottom: 76px;
padding-left: 12px;
}
Now I want to keep the scroll at bottom by default and whenever a message arrives it should scroll up.
Thanks in advance
Keeping it at the bottom:
You can just set the scrollTop to the height of the element:
Changing the following element: <div id="innerScroll" class="scroll">
var ele = document.getElementById('scrollme');
var innerEle = document.getElementById('innerScroll') //add this ID to your scroll class element. Or whatever name you want to
var height = innerEle.offsetHeight;
ele.scrollTop = height;
See a fiddle for this feature: https://jsfiddle.net/qyj4h73g/1/
For the chat updating the elements scrollTop value:
Assuming that the chat object that is constantly being updated is in JSON representation, you can just watch that JSON string value:
$scope.$watch('activeConversations', function(newValue, oldValue) {
var ele = document.getElementById('scrollme');
var curScrollTop = ele.scrollTop;
ele.scrollTop = curScrollTop - 16; //Go up 16 pixels, but you can change this as you need
});
I'm trying to set a different background image on the body of my separate partials.
But the images are just being loaded into the div area and not the whole body as i wanted, could any one of you be having an idea on how to solve this?
Here is my code
angular.module('controller',[])
app.controller('AboutCtrl',['$scope', function($scope){
$scope.title="The About page"
}])
app.controller('ServiceCtrl',['$scope', function($scope){
$scope.title="Our services page"
}])
app.controller('ContactCtrl',['$scope', function($scope){
$scope.title="How to contact us page"
}])
app.controller('MyCtrl', ['$rootScope', function ($rootScope) {
$rootScope.bgimg = "img/home.jpg";
}])
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
<body >
<div id="bg img" ng-controller="MyCtrl" style="background-image: url({{ bgimg }})">
</div>
</body
Can you not just move your main controller up to the body tag?
<body id="bg img" ng-controller="MyCtrl" style="background-image: url({{ bgimg }})">
<div ng-controller="OtherCtrl">
As I mentioned in my comments you create a service that holds the background variable. Then you create get/set methods to allow you to make changes.
var app = angular.module('controller',[])
.service('SessionService', function(){
var vm = this;
this.bgImg = "https://c1.staticflickr.com/1/31/37271521_47df0e4547_b.jpg";
return {
setBgImg: function(newBgImg){
vm.bgImg = newBgImg;
},
getBgImg: function(){
return vm.bgImg;
}
}
})
Then you inject the SessionService into the Main controller you have set on Body. And call the get method to retrieve the background variable.
app.controller('SessionCtrl', ['$scope','SessionService',function($scope, SessionService) {
this.getBgimg = SessionService.getBgImg;
}]);
<body id="bg img" ng-controller="SessionCtrl as vm" style="background-image: url({{ vm.getBgimg() }})">
Finally for every Controller you'd like to make the change, inject the service into the controller as well and call the Set method. In this example I have it being called from a button click function.
app.controller('ContactCtrl',['$scope','SessionService', function($scope,SessionService){
$scope.ContactTitle="How to contact us page";
$scope.winter = "";
$scope.changeBg = function(){
SessionService.setBgImg('http://alvaradoconsultinggroup.com/wp-content/uploads/2014/10/success.jpg');
}
}]);
<div ng-controller="ContactCtrl">
<p style="font-size: 25px;color: white;">{{ContactTitle}}</p>
<button ng-click="changeBg()">Change Back</button>
</div>
I piggybacked off Brian Baker's plunker to show you the changes in action here.
https://plnkr.co/edit/RjgwdwuOFJgMct4y3qUS?p=preview
SwitchWindow, Frame, Alert, everything I can think of and after lots of searching. Nothing has worked so far.
When I click on an "edit" button, a new window pops up with a text box, special character selection, save and exit buttons. All I want to do is enter text in the box but for some reason webdriver can not find the element.
Here's some HTML. The
textarea name="specHeading"
is what I'm trying to edit.
<script src="/js/componentlist.js" type="text/javascript">
<script src="/js/mrinformation.js" type="text/javascript">
<script src="/js/jquery.resources.js" type="text/javascript">
<script src="/js/validateresources.js" type="text/javascript">
<div class="ckmodal-next" style="top: 9px; left: 1281.5px;"></div>
<div class="ckmodal-prev" style="top: 9px; left: 261.5px;"></div>
<div class="ckmodal-close" style="top: -225px; left: 1239px;"></div>
<div class="ckmodal-background" style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgb(51, 51, 51); opacity: 0.8; z-index: 10000000;"></div>
<div class="modal-container" style="opacity: 1; position: fixed; top: -212.5px; left: 321.5px; display: block; z-index: 10000001;">
<form class="form">
<div class="row">
<div class="col24">
<div class="box box-gray">
<h2>
<div class="content">
<fieldset class="full">
<div class="form-field full">
<label>Heading:</label>
<textarea name="specHeading"></textarea>
</div>
<div class="form-field full">
<div class="form-field bottom full">
</fieldset>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
It looks like there's no windows to switch to, and it's not an iframe, nor an alert. Here's what I think is the JavaScript from the modal.
<script src="/js/productheaders.js" type="text/javascript">
;(function($){
var $currentEditHeader = null;
function setupForm(e) {
var $this = $(this),
value = $this.siblings('span').html();
$currentEditHeader = $this.parents('.product-header');
$('#edit-header').ckmodal({
onShow: function(){
$('textarea[name=specHeading]').val(value.replace(/<br\s*[\/]?>/g, '\n')).focus();
}
});
}
function saveHeader(e) {
var $this = $(this),
value = $('textarea[name=specHeading]').last().val();
if ( value == '' ) {
var defaultValue = $currentEditHeader.attr('data-default-value');
$currentEditHeader.children('span').text(defaultValue);
$currentEditHeader.addClass('default');
} else {
$currentEditHeader.children('span').html(value.replace(/<[^>]*>?/g, '').replace(/\n/g, '<br>'));
$currentEditHeader.removeClass('default');
}
The "popup" might be not a separate window/frame/alert, but part of your main page, which is just made visible.
You can treat it as such. Hard to tell with just this excerpt.
You might have to wait for it to be visible if there is some kind of animation involved.
Additionally, there are some issues inserting text in those text fields. The following worked for us in such cases:
Call textFieldElement.clear()
Then call textFieldElement.sendKeys()
HTML page in AngularJS.
My ng-show won't show div when boolean is set true.
This is my HTML file:
<div class="container">
<div ng-if="!query" ng-hide="editBoolean">
<h3>{{article.id}} - {{article.title}}</h3>
<h4 ng-bind-html="article.text"></h4>
<button ng-click="edit(true)">Endre tekst</button>
</div>
<div ng-show="editBoolean">
<style>
.ta-editor {
min-height: 300px;
height: auto;
overflow: auto;
font-family: inherit;
font-size: 100%;
}
</style>
<input type="text" ng-model="article.title" value="{{article.title}}">
<div text-angular="text-angular" ng-model="article.text"></div>
<button ng-click="update(article.text, article.title)">Lagre</button>
<button ng-click="edit(false)">Avbryt</button>
</div>
<div ng-if="query">
<h3>{{query}}</h3>
</div>
This is my controller.js file:
// Article controller
wikiControllers.controller('articleController', ['$scope', 'articleService', '$routeParams', '$sanitize',
function($scope, articleService, $routeParams, $sanitize){
$scope.editBoolean = false;
$scope.edit = function(editValue){
this.editBoolean = editValue;
console.log(this.editBoolean);
};
}]);
When i have console.log my booleanfil, it shows true(The value is changed)
this:
this.editBoolean = editValue;
should be:
$scope.editBoolean = editValue;