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();
}
Related
I'm having trouble getting the messages from the messages array to display based on the user selected. I'm currently able to show all of the messages on the left side, but it needs to only show the selected message on the left, based on the user associated with it on the right. The message showing below each name, needs to be the message showing on the left when clicking the username.
the controller and directives
var movieApp = angular.module("movieApp",[]);
movieApp.controller("movieController",function($scope){
$scope.messages = [{
user:"aleksandra",
message:"this is aleksandras message"
},
{
user:"evan",
message:"this is evan message"
},
{
user:"tom",
message:"this is toms message"
},
{
user:"jarid",
message:"this is jarids message"
}];
$scope.response = [];
$scope.sendMessage = function(response){
$scope.toggle = $scope.toggle;
$scope.response.push(response);
console.log(response);
};
});
movieApp.directive("usersList", function(){
return {
restrict: "E",
scope: false,
template: "<p>Users</p>"+
"<ol class='list-unstyled animated fadeInDown'>"+
"<li ng-repeat='message in messages'>"+
"<h5 ng-click='showDetails = ! showDetails'>{{message.user}}</h5>"+
"<div ng-show='showDetails'>"+
"<p>{{message.message}}</p>"+
"</div>"+
"</li>"+
"</ol>"
};
});
movieApp.directive("messagesList", function(){
return {
restrict: "E",
scope: false,
template: "<div class='panel panel-primary'>"+
"<div class='panel-heading'>"+
"<span class='glyphicon glyphicon-comment'></span> Chat</div>"+
"<div class='panel-body body-panel'>"+
"<ol class='list-unstyled'>"+
"ONLY SHOW THE MESSAGE FOR THE USER SELECTED ON THE RIGHT"+
"<li ng-repeat='message in messages'>"+
"<p>{{message.message}}</p>"+
"</li>"+
"</ol>"+
"</div>"+
"<div class='panel-footer clearfix'>"+
"<form name='form'>"+
"<input type='text' name='message' ng-model='response' class='form-control' />"+
"<span class='col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-12' style='margin-top: 10px'>"+
"<button class='btn btn-warning btn-lg btn-block' id='btn-chat' ng-click='sendMessage(messages)' ng-disabled='!form.message.$dirty'>Send</button>"+
"</span>"+
"</form>"+
"</div>"+
"</div>"
};
});
markup
<div ng-controller="chatController">
<div class="container">
<div class="row">
<div class="col-xs-9">
<messages-list></messages-list>
</div>
<div class="col-xs-3">
<users-list></users-list>
</div>
</div>
</div>
</div>
Current Plunker: Link
To achieve the solution you needed, call a method on usersList directive when clicked on userName and toggle the message
I have taken a toggleDetails() method on the directive.
<h5 ng-click='toggleDetails(message)'>{{message.user}}</h5>
Here is a code snippet for the same
chatApp.directive("usersList", function(){
return {
restrict: "E",
scope: false,
template: "<p>Users</p>"+
"<ol class='list-unstyled animated fadeInDown'>"+
"<li ng-repeat='message in messages'>"+
"<h5 ng-click='toggleDetails(message)'>{{message.user}}</h5>"+
"<div ng-show='message.showDetails'>"+
"<p>{{message.message}}</p>"+
"</div>"+
"</li>"+
"</ol>"
,
link: function(scope) {
scope.toggleDetails = function(message)
{
angular.forEach(scope.messages, function(value, key){
if(message != value)
value.showDetails = false;
});
message.showDetails = !message.showDetails;
}
}
}
});
Here is a Working DEMO
Here's an alternate that uses the $index of the ng-repeat so there isn't a need for the extra property on each message. Instead the controller $scope has a shownMessage property.
ng-repeat='message in messages' ng-if='shownMessage === $index'
var selectedUser;//get when user clicked
var selectedUserMessages=angular.filter('filter')($scope.messages,
{user:selectedUser});
you can now bind the found items where you want
I want to edit and save content in selected directive.The directive is populated by ng-repeat. On button click visible items should change to input field and again on click it should reverse
Directive is
.directive('component', function() {
var link = function(scope, element, attrs) {
var render = function() {
var t = scope.layouts[scope.type][attrs.indexs];
var icon = scope.layouts[scope.type][attrs.indexs];
var v = attrs.value;
if(scope.type=="edit"){
element.html('<input type="' + t + '" ng-model="vm.name" value="'+v+'">');
if(attrs.indexs==1){
element.html('<' + t + '>Save');
}}
if(scope.type=="display"){
element.html('<' + t + ' ng-model="'+v+'" >'+v+'</'+t+'>');
if(attrs.indexs==1){
element.html('<' + t + ' >Edit');
}}};
scope.$watch('type', function(newValue, oldValue) {
render();
});
};
return {
restrict : 'E',
link : link
}
});
plunker Link
Problem is on click all directive is changed to editable and vice-versa.
How can I make it work on selected set of directive
Try something like the following. It's much simpler to use a template with a directive than trying to modify the html directly.
Directive
angular.module('myApp', [])
.controller('MyController', MyController)
.directive('component', function(){
return {
template: [
'<div>',
'<span style="font-weight:bold" ng-show="!editing">{{ value }} <button ng-click="editing = true">Edit</button></span>',
'<span ng-show="editing"><input type="input" ng-model="value"><button ng-click="editing = false">Save</button></span>',
'</div>'
].join(''),
restrict: 'E',
scope: {
value: '=value'
},
link: function($scope){
$scope.editing = false;
}
}
});
HTML
<div class="col-sm-12" ng-repeat="s in vm.allCat track by $index">
<div class="col-sm-1 text-muted">Name</div>
<div class="col-sm-9 text-left">
<component value="s.name"></component>
</div>
</div>
</div>
I've forked your plunker here.
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>
The problem is that to click on the name of infoWindow redirection does not work with ui- sref or ng-click inside marker.content
index.html
<div ng-controller="MapCtrl">
<div id="mapPage" class="mapPageStyle left" >
<div id="mapPageContent" style="height:100%;background:#fff;">
<div id="mapContainer" ng-repeat="marker in markers">
</div>
</div>
</div>
</div>
controller_map.js (MapCtrl)
function createMarker(info) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.name,
icon: info.markerImage
});
var myClass = [];
marker.content = '<div id="hook" class="hook" >' +
'<div class="nameInfoWindow" ui-sref="page_center/comercio({IdBusiness: info.id })">' + info.name + '</div>' +
'<div style="text-align: center;">' +
'<div class="ec-stars-wrapper">' +
'</div>' +
'</div>' +
'</div>';
google.maps.event.addListener($scope.map, 'click', function () {
infoWindow.close();
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
Your example doesn't work because you need to $compile the harcoded template. Here you have a thread talking about compiling html from controller, the second answer talks about "working outside angular scope and expects angular parse the scope", he creates an object wich compiles html&angular dynamic code
AngularHelper.Compile = function ($targetDom, htmlToCompile, applicationName)
Injecting html from controller directly is not a god practice due to performance issues.
It could be better an angular ready implementation like angular maps, with angular maps plugin you could implement something like:
<ui-gmap-google-map
center='map.center'
zoom='map.zoom'
options='options'
control='map.control'>
<ui-gmap-markers idKey="'bid'" models="map.markers" coords="'self'">
<ui-gmap-windows show="show">
<div ng-controller="MapClickCtrl">
<h5 ng-non-bindable>{{title}}</h5>
<button class="button" ng-click="goTo('page')">Detail</button>
</div>
</ui-gmap-windows>
</ui-gmap-markers>
</ui-gmap-google-map>
This is a working example, the method goto() is fired in MapClickCtrl.
Sorry If this question has been asked before, but my issue is bit different and hope someone can help me out.
1) I have a Directive which has many buttons. I want to call a function on this buttons and inside a directive. But I don't know how.
// Directive for the login header to avoid the duplication of the code
angular.module('App').directive('mainHeader',function(){
return{
restrict: 'AE',
template:'<h1 class="logo"> My App </h1>'+
'<button class="btn btn-primary">New User</button>'+
'<button class="btn btn-primary">New Product</button>'+
'<span class="dropdown" on-toggle="toggled(open)">'+
'<a href class="dropdown-toggle">'+
'<img class="userProfile" src="" alt="User Profile">'+
'<b class="caret"></b>'+
'</a>'+
// Here on my profile ????
'<ul class="dropdown-menu pull-right">'+
'<li> My Profile </a> </li>'+
'<li class="divider"></li>'+
// Here on my logout ??????
// This does not work
'<li> <a href="" ng-click="logOut()"> Sign Out </li>'+
'</ul>'+
'</span>'
}
});
My controller
(function() {
var logOutController = function($scope){
$scope.logOut = function(){
// Want to call this
}
logOutController .$inject = ['$scope'];
angular.module('App').controller('logOutController ',logOutController );
}());
And my view will be only one line
<div main-header></div>
I don't know how to do this
Update 1: -
Please have a look at the Plunker
http://plnkr.co/edit/YONVyVvNm4pQGFMU6SkG?p=preview.
You will just need to add an isolate scope to your directive:
// Directive for the login header to avoid the duplication of the code
angular.module('App').directive('mainHeader', function () {
return {
restrict: 'AE',
template: '<h1 class="logo"> My App </h1>' +
'<button class="btn btn-primary">New User</button>' +
'<button class="btn btn-primary">New Product</button>' +
'<span class="dropdown" on-toggle="toggled(open)">' +
'<a href class="dropdown-toggle">' +
'<img class="userProfile" src="" alt="User Profile">' +
'<b class="caret"></b>' +
'</a>' +
// Here on my profile ????
'<ul class="dropdown-menu pull-right">' +
'<li> My Profile </a> </li>' +
'<li class="divider"></li>' +
// Here on my logout ??????
// This does not work
'<li> <a href="" ng-click="logOut()"> Sign Out </li>' +
'</ul>' +
'</span>',
scope: {
'logOut': '&onLogOut' //<- this ties your directive's logOut function to an attr on the HTML tag
}
}
});
Then you just modify your HTML to:
<div main-header on-log-out="logOut()"></div>
Plunker Example