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?
Related
I need to use recursion in angular directives.
Follow the code with the template without recursion.
It is a left menu that must be created recursively.
I'm not sure how to put the recursion.
I tried '<leftmenu menuLeft = "itemmenu"> </ leftmenu>', but so only the profile image appears several times.
.directive('leftmenu', ['$compile', function ($compile) {
return {
retrict: 'E',
scope: { menuLeft: '=?' },
template: '<div class="user-panel">' +
'<div class= "pull-left image">' +
'<img src="{{ menuLeft.profileImgSrc }}" class="img-circle" alt="{{ menuLeft.profileName }}" />' +
'</div>' +
'<div class="pull-left info">' +
'<p>{{ menuLeft.profileName }}</p>' +
'</div>' +
'</div>' +
'<ul class="sidebar-menu">' +
'<li class="header">{{ menuLeft.header }}</li>' +
'<li class="treeview" ng-repeat="itemmenu in menuLeft.itens">' +
'<a href="{{ itemmenu.actionLink }}">' +
'<i class="{{ itemmenu.visualClass }}"></i> <span>{{ itemmenu.label }}</span>' +
'<span class="pull-right-container" ng-show="{{ itemmenu.subItems.length > 0 }}">' +
'<i class="fa fa-angle-left pull-right"></i>' +
'</span>' +
'</a>' +
'<ul class="treeview-menu">' +
'<li ng-repeat="subItem in itemmenu.subItems">' +
'<a ng-if="subItem.openInNewWindow" target="_blank" href="{{ subItem.actionLink }}">' +
'<i {{ subItem.class }}></i>{{ subItem.label }}' +
'</a>' +
'<a ng-if="!subItem.openInNewWindow" target="_self" href="{{ subItem.actionLink }}">' +
'<i {{ subItem.class }}></i>{{ subItem.label }}' +
'</a>' +
'</li>' +
'</ul>' +
'</li>' +
'</ul>',
compile: function (element) {
},
controller: function ($location, $http, $scope) {
$scope.menuLeft = {
"profileName": "",
"profileImgSrc": response.data.msgSaida[0].profileImgSrc,
"header": "",
"itens": response.data.msgSaida[0].itens,
"token": token
};
}
}
}
}
};
A little late to the party, if you're still looking to resolve this with a recursive directive, it depends what your data structure looks like, but assuming from what you've posted it looks like this:
{
"profileName": "",
...
"items": [{
"label": "title1",
"class": "class1",
"items: [...]
},{
"label": "title1",
"class": "class1",
"items: [...]
}]
}
You can split them into two directives:
One is the parent sidePanel directive that contains the top level
One is the menuList directive that will recursively display sub items
// profile image
// profile name
// etc
<menu-list items="leftMenu.items"></menu-list>
where menu list template was like:
<ul>
<li ng-repeat="item in items">
<span class="{{item.class}}">{{item.label}}</span>
<menu-list ng-if="item.items" items="item.items"></menu-list>
</li>
</ul>
So in each instance of a menu object (label,class,items) the items will be converted into a sub menu-list. You might need to play with it a little and add in some other features.
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.
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 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.