This is angularjs.
For some reason, I need to create the popup inside the controller.
So I have something like this:
var popupTemplate =
'<div class="modal fade">' +
' <div class="modal-dialog">' +
' <div class="modal-content">' +
' <div class="modal-header">' +
' <button type="button" class="close" data-dismiss="modal">×</button>' +
' </div>' +
' <div class="modal-body">' +
' <div>You sure?</div>' +
' </div>' +
' <div class="modal-footer">' +
' <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>' +
' <button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
To open the modal I run this:
var themodal = $(popupTemplate).modal();
I need to know if the user clicked on the OK-button.
Unfortunately adding an "ng-click" causes problems.
Nothing is executed.
I have read a little about compiling and/or using data-ng-click. But none of those worked.
So I was thinking about listening to the promise.
But having:
themodal.then(function(){
console.log("test");
})
Results in the error "themodal.then is not a function".
I then tried running this instead:
var dialog = $modal.open(popupTemplate);
dialog.result.then(function(){
//Do stuff with respect to closure
});
But I then get a "$modal-open is not a fucntion".
Even though I included '$modal' in my app.
Which of them should I use and how can I make one of these approaches work?
Please take a look at my answer in here i believe it will help you with this and give you another perspective of modal use.
Related
Error: $compile:ctreq
Missing Required Controller
Controller 'ngModel', required by directive 'ngChange', can't be found!
sample code
//create dynamic UI
var targetQDom = '<div id="' + item.id + '" style="width=100%;background: white;" ><div class="head" style="border-bottom-color: azure;border-bottom-style: double;"><a style="color:aliceblue"><i class="fa fa-times-circle-o fa-fw fa-2x bt-right" style="margin-top: -4px;" ng-change="removeR(' + item.id + ',' + (index + 1) + ',$event)"></i></a> <a style="color:white;" data-toggle="collapse" class="collapsed" data-target="#' + item.id + '-rule-' + (index + 1) + '" ng-change="targetqClick(' + item.od + ',' + (index + 1) + ',' + item.req + ')" >' + item.text + '</a></div></div>';
var $targetQDom = window.j$(targetQDom).appendTo('#appendRules');
$compile($targetQDom)($scope);
the above code will be there in the controller.
above code is dynamically creating HTML based on model data.
after running app I am getting the above error in console and it not creating UI.
If I user using the ng-click the above code works fine.
other issues with MAC OS Google chrome
but ng-click has issued in MAC OS google chrome drop-down change not working.
. If I try to change drop down value it's not triggered.so the target drop-down value is not changing.
I tried to replicate it and found some error on your code. check with this.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div id="someid" style="float: left;">
<select id="some-condition-list" class="some-control cursor_Hand"
ng-model="selectedsome" ng-change="somechange(someindex,$event)" >
<option value="">Show All</option>
<option ng-repeat="some in somes.condtions " value="{{some.Id}}">{{some.name}}
</option>
</select>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.some="Hey";
$scope.somes ={};
$scope.somes.condtions =[];
$scope.somes.condtions =[{'Id':'1', 'name':"Gayani"},{'Id':'2',
'name':"Chaminda"}];
$scope.selectedsome="HI";
$scope.someindex=1;
$scope.somechange = function(item, item1){
alert(item);
}
}]);
</script>
</body>
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>
I'm using datatables along with angular and I have this piece of code:
render: function (data, type, full, meta) {
var buttonHtml = '<div style="text-align: center;">' +
'<button data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-xs" data-ng-click="loadModal(' + meta.row + ')">' +
'<i class="fa fa-folder-open-o"></i> View' +
'</button>' +
'</div>';
return buttonHtml;
}
The above it's a handler from datatables to dynamically format a column based on data.
The problem is that the ng-click handler (loadModal) is never called and I guess because the html is never compiled. How could I solve this issue?
Have a look at this answer: Angular: ng-bind-html filters out ng-click? it includes an example of a compile directive.
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
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?