What i want to do is when i click for example on some button with binded function like this, it will create whole DOM element structure for private chat window purpose
$scope.openPrivateChatWindow = function () {
//here i want to do some coding to create whole div structure
}
With jQuery i will do something like this
function openPrivateChatWindow() {
var div = '<div id="' + ctrId + '" class="ui-widget-content draggable" rel="0">' +
<div class="header">' +
'<div style="float:right;">' +
'<img id="imgDelete" style="cursor:pointer;" src="/Images/delete.png"/>' +
'</div>' +
'<span class="selText" rel="0">' + userName + '</span>' +
'<span class="selText" id="msgTypeingName" rel="0"></span>' +
'</div>' +
'<div id="divMessage" class="messageArea">' +
'</div>' +
'<div class="buttonBar">' +
'<input id="txtPrivateMessage" class="msgText" type="text" />' +
'<input id="btnSendMessage" class="submitButton button" type="button" value="Send" />' +
'</div>' +
'<div id="scrollLength"></div>' +
'</div>';
}
is there something how i can archieve this using angular and if it is, what is the best way how to do that, for example if i can load some html template for that or do it like i showed right up here with jQuery
You should not add html nodes to the DOM from the within the controller.
Either use a custom directive or just hide your div using ng-if and make it appear on button click.
$scope.isChatHidden = true;
$scope.openPrivateChatWindow = function () {
$scope.isChatHidden = false;
}
<div ng:if="isChatHidden">
Other DOM Elements
</div>
Related
http(req).success(function(r){
var test = {};
test.a = res.a;
test.b = res.b;
var array-list = res.z;
var details = popup.show({
template : '<div class="row"><div class="row">' +
'<div class="col col-40"><span>{{test.a}}</span></div>' +
'<div class="col col-40"><span>{{test.b}}</span></div>' +
'</div></div><ul class="list"><li class="item" ng-repeat="list in array-list">{{list.a}}</li></ul></div>',
title :'Some Text',
scope:$scope,
buttons:[{
test:'Close',
onTap:function(e){
e.preventDefault();
details.close();
}
}]
});
Can any one correct me where i caught wrong in implementing Ionic Pop-up with custome template and with ajax response dynamic content.
You have a typo. In Success function. You are getting "r" and you are using "res". Otherwise the code has one more thing missing. Where is your
details.then(function(result){
//do something here with result
})
Without this the popup wont show up. I GUESS.
try this...
var details = $ionicPopup.show({
template : '<div class="row"><div class="row">' +
'<div class="col col-40"><span>{{test.a}}</span></div>' +
'<div class="col col-40"><span>{{test.b}}</span></div>' +
'</div></div><ul class="list"><li class="item" ng-repeat="list in array-list">{{list.a}}</li></ul></div>',
title :'Some Text',
scope:$scope,
buttons:[{
test:'Close',
onTap:function(e){
e.preventDefault();
details.close();
}
I'm new to angularjs and i'm getting some troubles. Usually I find a way to fix it but not this time.
So the problem is I want to use an md-button as a link to another page. But, when I add an href, the button disappears from the page.
Here is my code:
home.html
<body ng-app="friend-s-app">
<div ng-controller="friendsappController">
<md-toolbar>
<div class="md-toolbar-tools">
<md-button href="/home.html" >
Home
</md-button>
</div>
</md-toolbar>
</div>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/hammerjs/hammer.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<script src="app.js"></script>
app.js in case you want it :
(function(angular, undefined){
"use strict";
angular
.module('friend-s-app', ['ngMaterial', 'ngMessages', 'ng'])
.controller('friendsappController', inscriptionEditor)
.controller('InscriptionSheet', InscriptionSheet);
function inscriptionEditor($scope, $mdDialog) {
var alert;
$scope.myPathVariable = 'path/to/somewhere';
$scope.showInscription = showInscriptionSheet;
$scope.showSignIn = showSignIn;
function showInscriptionSheet($event) {
$mdDialog.show({
targetEvent: $event,
template:
'<md-dialog layout="column">' +
'<md-content>' +
'<form style="padding: 20px;">' +
'<div layout="row">' +
'<md-input-container>' +
'<label>First name</label>' +
'<input ng-model="user.firstName" required/>' +
'<div ng-messages="userForm.firstName.$error" ng-show="userForm.firstName.$dirty">' +
'<div ng-message="required">This is required!</div> '+
'</div>' +
'</md-input-container>' +
'<md-input-container>' +
'<label>Last name</label>' +
'<input ng-model="user.lastName" required/>' +
'<div ng-messages="userForm.lastName.$error" ng-show="userForm.lastName.$dirty">' +
'<div ng-message="required">This is required!</div> '+
'</div>' +
'</md-input-container>'+
'</div>'+
'<md-input-container style="width: 50%">' +
'<label>Nickname</label>' +
'<input ng-model="user.nickname" required minlength="5" maxlength="15"/>' +
'</md-input-container>' +
'<div layout="row">' +
'<md-input-container>' +
'<label>Password</label>' +
'<input ng-model="user.password" type="password" required minlength="5" maxlength="15"/>' +
'</md-input-container>' +
'<md-input-container>' +
'<label>Repeat password</label>' +
'<input ng-model="user.repassword" type="password" required minlength="5" maxlength="15"/>' +
'</md-input-container>'+
'</div>'+
'<md-input-container>' +
'<label>E-mail</label>' +
'<input ng-model="user.email" required/>' +
'</md-input-container>'+
'<div layout="row">'+
'<md-button ng-Click="closeDialog()" style="width:50%">' +
'Cancel' +
'</md-button>' +
'<md-button style="width: 50%">' +
'Validate' +
'</md-button>' +
'</div>'+
'</form>'+
'</md-content>'+
'</md-dialog>',
controller: 'InscriptionSheet',
onComplete: afterShowAnimation,
locals: { employee: $scope.userName }
});
function afterShowAnimation(scope, element, options) {
}
}
function showSignIn($event) {
$mdDialog.show({
targetEvent: $event,
template:
'<md-dialog>' +
'<md-content>' +
'<md-input-container>' +
'<label>Nickname</label>' +
'<input ng-model="user.nickName" required/>' +
'<div ng-messages="userForm.nickName.$error" ng-show="userForm.nickName.$dirty">' +
'<div ng-message="required">This is required!</div>' +
'</div>' +
'</md-input-container>' +
'<md-input-container>' +
'<label>Password</label>' +
'<input ng-model="user.password" required type="password"/>' +
'<div ng-messages="userForm.password.$error" ng-show="userForm.password.$dirty">' +
'<div ng-message="required">This is required!</div> '+
'</div>' +
'</md-input-container> ' +
'<div layout="row">'+
"<md-button ng-Click=\"closeDialog()\" style=\"width: 50%\" >" +
'Cancel' +
'</md-button>' +
'<md-button style="width: 50%" href="home.html">' +
'Validate' +
'</md-button>' +
'</div>'+
'</md-content>' +
'</md-dialog>',
controller: 'InscriptionSheet',
onComplete: afterShowAnimation,
locals: { employee: $scope.userName }
});
function afterShowAnimation(scope, element, options) {
}
}
}
function InscriptionSheet($scope, $mdDialog, employee) {
$scope.employee = employee;
$scope.closeDialog = function() {
$mdDialog.hide();
};
}
})(angular);
And there are the results :
Without the href :
http://i.stack.imgur.com/zKRKS.png
With it :
http://i.stack.imgur.com/M4JqC.png
thanks for helping me.
I just experienced a similar issue. Note when you switch from an ng-click to an ng-href it will inject an anchor tag instead of a button. To maintain the same visual characteristics I needed to apply an display: inline-block; to the .md-button class (which gets added to the aforementioned anchor tag) in my CSS. This may be the cause of it disappearing on your side.
Let me know if that makes sense or requires any further elaboration.
I am working with angular ui-bootstrap. Looking thorugh the ui-bootstrap-tpls.js file, i see this snippet
.directive('accordion', function () {
return {
restrict:'EA',
controller:'AccordionController',
transclude: true,
replace: false,
templateUrl: 'template/accordion/accordion.html'
};
})
Notice: templateUrl: 'template/accordion/accordion.html'.
Where is this file?? It is nowhere to be found on my computer? I assume its calling it from remote location, if so, how do i get it local so i can work on it? The greater question here is How to access ui-bootstrap built in directives so i can modify them to my liking?
that file is coming from the $templateCache. From Angular docs:
The first time a template is used, it is loaded in the template cache for quick retrieval. You can load templates directly into the
cache in a script tag, or by consuming the $templateCache service
directly.
Adding via the script tag:
This is the
content of the template Note: the script tag containing
the template does not need to be included in the head of the document,
but it must be a descendent of the $rootElement (IE, element with
ng-app attribute), otherwise the template will be ignored.
Here's an example:
angular.module('template/components/login.tpl.html', [])
.run(['$templateCache', function($templateCache){
$templateCache.put('template/components/login.tpl.html',
'<div class="row">' +
'<div class="col-md-4 col-md-offset-5 col-xs-12 col-xs-offset-2">' +
'<div>' +
'<label for="email">Email:</label>' +
'<input type="email" id="email" ng-model="user.username" class="required" name="email" autofocus />' +
'</div>' +
'<div>' +
'<label for="pwd">Password:</label>' +
'<input type="password" id="pwd" class="required" ng-model="user.password" name="pwd"/>' +
'</div>' +
'<p>' +
'<button id="login" class="btn btn-default" ng-click="onSubmit(user)">Login</button>' +
'</p>' +
'</div>' +
'</div>');
}]);
I would reference 'template/components/login.tpl.html' as my templateUrl
For using the filtering of ng-grid, I mean column wise ng-grid I looked at this plunker as an example which works fine - http://plnkr.co/edit/c8mHmAXattallFRzXSaG?p=preview. However when I try to make my own example of column filtering and I use the var as per ng-grid documentation
var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{cursor: col.cursor}" ng-class="{ ngSorted: !noSortVisible }">'+
'<div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText">{{col.displayName}}</div>'+
'<div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>'+
'<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>'+
'<div class="ngSortPriority">{{col.sortPriority}}</div>'+
'</div>'+
'<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>';
I keep getting a syntax error at the colt. Can someone please let me know what's going on here?
Your template string include '
'<div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText">{{col.displayName}}</div>'+
you need use \, like this
'<div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText">{{col.displayName}}</div>'+
Edit:
If need filter box, you miss this
<input type="text" ng-click="stopClickProp($event)" placeholder="Filter..." ng-model="col.filterText" ng-style="{ \'width\' : col.width - 14 + \'px\' }" style="position: absolute; top: 30px; bottom: 30px; left: 0; bottom:0;"/>
This is example
Plunker
Edit:
The original plunkr is design filtering from the beginning characters. If you went to filtering from the substring, you can try * begin filter textbox.
If you don't like it, you can modify filterBarPlugin function :
var filterText = (col.filterText.indexOf('*') == 0 ? col.filterText.replace('*', '') : "^" + col.filterText) + ";";
searchQuery += col.displayName + ": " + filterText;
To
searchQuery += col.displayName + ": " + col.filterText;
Example
I am trying to get HTML to compile in a growl alert. Here is my code:
var html = '<h3>' + rejection.config.method + ' '+ rejection.config.url + '</h3>' +
'<hr><div>' +
(_.isObject(rejection.data) ? ('<pre>' + JSON.stringify(rejection.data, null, 2) + '</pre>') : rejection.data) +
'</div>' + '<a ng-click="reportError($event)"><i class="fa fa-bullhorn hoverable"></i> Report this error</a>';
growl.addErrorMessage(html,
{
enableHtml: true
});
$compile(html)($scope);
On the page the HTML looks like:
<div ng-bind-html="message.text" ng-switch-when="true" class="ng-scope ng-binding"><h3>GET services/link</h3><hr><div>null</div><a><i class="fa fa-bullhorn hoverable"></i> Report this error</a></div>
The html should have the directive that I appended: "<a ng-click="reportError($event)" and it is not being added. Any ideas?