I'm simply trying to set the width of the dialog box, and I haven't succeeded (yet). I have added a CSS class, but the width set is the one of the dialog shade.
.dialogwidth800 {
width : 800px;
}
...
ngDialog.openConfirm({
template: 'templateRemove',
className: 'ngdialog-theme-default dialogwidth800',
scope: $scope
}).then(
EDIT : fiddle corrected with working solution here : https://jsfiddle.net/jr626fww/8/
It can easily achieved by using custom css like below :
.ngdialog.ngdialog-theme-default.custom-width-800 .ngdialog-content {
width: 800px;
}
.ngdialog.ngdialog-theme-default.custom-width-900 .ngdialog-content {
width: 900px;
}
Use these css class when you open ngDialog :
To use custom-width-900
ngDialog.openConfirm({
template: 'templateRemove',
className: 'ngdialog-theme-default custom-width-800',
scope: $scope
});
To use custom-width-900
ngDialog.openConfirm({
template: 'templateRemove',
className: 'ngdialog-theme-default custom-width-900',
scope: $scope
});
Apply width with class .ngdialog-content{width :100px !important;} Using !important is very important to override any css property
Related
I have an angular directive named fund. The directive is defined as follows.
return{
restrict: 'E',
replace: true,
scope: {
data: '=',
cut: '#'
},
templateUrl: 'app/directives/partials/fund.jsp'
}
It has a property named cut. If cut is set, I will apply text-cut class, and if not set, no class. The class is as follows in case needed:
.text-cut{
overflow: hidden;
text-align: left;
text-overflow: ellipsis
}
I have tried the using the directive as:
<fund data="myCtrl.fundList" cut="true"></fund>
<fund data="myCtrl.fundList" cut="'true'"></fund>
with following ng-class attributes in the template:
ng-class="text-cut: cut"
ng-class="text-cut: 'cut'"
ng-class="{text-cut: cut}"
ng-class="{text-cut: 'cut'}"
ng-class="text-cut: cut===true"
ng-class="text-cut: 'cut'===true"
ng-class="{text-cut: cut===true}"
ng-class="{text-cut: 'cut'===true}"
But none of these combinations applied text-cut class to my fund directive. Where is the mistake?
You have to quote text-cut. Try
ng-class="{'text-cut': cut}"
Create a function that returns the string class you want based on some condition. Then call it in your ng-class. As long as the function returns the css you want it should work.
$scope.checkCut = function(){
if(this.cut != null){
return 'text-cut';
}
}
In your directive
ng-class="checkCut"
I am creating a web app that has multiple dialog windows set up by ng-repeat'ing a directive, <make-dialog>. Information specific to each dialog (width, height, position, etc), is stored in an array in the controller and passed into the directive as a scope variable.
Now, I would like to add a boolean scope variable that can be accessed and modified by all the dialog windows. So when you click the "+" button in any of the dialogs, the scope variable changes to "true", and all the other dialogs recognize that that change has been made.
Here is a sketch of the code I have tried:
Controller:
angular.module('root', [])
.controller('index', ['$scope', function($scope){
$scope.dialogs = [
{
minimized: false,
maximized: false,
width: 200,
height: 300,
top: 5,
left: 5,
zindex: 1,
template: 'experiment-dialog.html'
},
{
minimized: false,
maximized: false,
width: 200,
height: 250,
top: 257,
left: 238,
zindex: 0,
template: 'other-dialog.html'
}];
$scope.bool = false; //The variable I want to be able to access and change
}]);
Directive:
.directive('makeDialog', function($document) {
return {
restrict: 'E',
scope: {
model: '=',
dialogs: '=',
bool: '='
},
template: "<button ng-click='maximize()> + </button>'",
link: function(scope, element, attrs) {
scope.maximize = function() {
scope.bool = true;
}
}
}
});
index.html:
<html>
<body ng-app='root' ng-controller='index'>
<div id='container'>
<div ng-repeat='dialog in dialogs|filter:{minimized:false}'>
{{bool}}
<make-dialog model='dialog' dialogs='dialogs' bool='bool'></make-dialog>
</div>
</div>
</body>
</html>
This displays on the screen two buttons and the words
"false false". But when I click one of the "+" buttons, only one of the "false" values changes to true. So this variable is not global, but is somehow only seen by one dialog. Is there any way to fix this, so that clicking on one button will make both dialogs realize that the variable is now true?
Check working demo: Plunker
Your problem is that you bind the model to some primitive variable inside the ng-repeat:
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope
So, use some object to perform the two-way binding.
I am trying to create a kendo grid (angularjs) and attached a personalized editor <div my-directive-editor></div> via grid options editable.template. On my directive editor (angularjs directive), i specify the structure of HTML from remote file and link it via templateUrl. Upon running the application, everything works great when i first click the Add New Entry but when i cancel the popup dialog and click again the Add New Entry an error will show $digest already in progress in angular format.
I tried instead using templateUrl I used template and formatting the whole HTML structure as string and passed it there and it goes well without the error but as i can see, it is hard for the next developer to manage the very long HTML string so it would be great if i can separate it to remote file and just link it to templateUrl. I prepared a dojo to play with CLICK HERE the content of TestTemplate.html is the HTML string from template.
This is my directive
app.directive('grdEditor',
[
function () {
return {
restrict: 'A',
replace: true,
scope: {
dataItem: '=ngModel'
},
//template: '<div><table><tr><td>Name</td><td><input ng-model="dataItem.Name" class="k-input k-textbox" /></td></tr><tr><td>Birthdate</td><td><input kendo-date-picker k-ng-model="dataItem.Birthdate" /></td></tr><tr><td>Gender</td><td><input kendo-combo-box k-ng-model="dataItem.Gender" k-options="optGender" /></td></tr></table></div>',
templateUrl: 'http://localhost/Angular/TestTemplate.html',
/*template: function(){
return '<div><table><tr><td>Name</td><td><input ng-model="dataItem.Name" class="k-input k-textbox" /></td></tr><tr><td>Birthdate</td><td><input kendo-date-picker k-ng-model="dataItem.Birthdate" /></td></tr><tr><td>Gender</td><td><input kendo-combo-box k-ng-model="dataItem.Gender" k-options="optGender" /></td></tr></table></div>';
},*/
controller: function ($scope, $attrs, $timeout) {
$scope.optGender = {
dataTextField: 'Text',
dataValueField: 'Value',
dataSource:
{
data: [
{
Text: 'Male',
Value: 1
},
{
Text: 'Female',
Value: 2
}]
}
};
}
};
}
]);
and this is my kendo grid options (partial)
$scope.optGrid = {
editable: {
mode: "popup",
window: {
minHeight: '320px',
minWidth: '365px',
},
template: '<div grd-editor ng-model="dataItem"></div>',
},
toolbar: ['create', 'excel'],
excel: {
allPages: true
},
.....................
Any help would be appreciated.
TIA
i think a there is problem with templateUrl. you don't need to give http://
you just need to give path from your base directory or directory of your index.html
I am looking for a simple equivalent to a MsgBox.Show( message text) when using kendo UI in angular, without using BootstrapUI since I'm using kendo UI.
I've read http://blogs.telerik.com/kendoui/posts/13-06-24/announcing-angular-kendo-ui
but it has the modal window defined in markup.
Is there a counterpart to this jQuery version that dynamically creates the DIV and stuffs some markup into the html property?
$(".helpimg").on("click", function (e) {
$(document.createElement('div'))
.attr({ title: 'Help', 'class': 'help' })
.html(help[e.target.id])
.dialog({
buttons: { OK: function () { $(this).dialog('close'); } },
close: function () { $(this).remove(); },
draggable: true,
modal: true,
resizable: true,
width: '50%',
height: 'auto'
});
});
You can dynamically create kendo window objects by applying the kendoWindow() function on a dynamically created div to your document. Try this dojo and let me know if this is what you were looking for :
http://dojo.telerik.com/esaWi/2
[SOLVED]
I created a simple SVG directive using angular 1.3-beta which features a "type: 'svg'" for directive. The code is straightforward (see Plunker http://plnkr.co/edit/vgElXdWXvfH0faH0qKHk?p=preview - updated with solution):
Create a SVG element containing a square
when the square is clicked, a class is added to it (fill with red)
ISSUE: the class is correctly added to the SVG square element but it is ignored and the square remains black.
Here is the js part:
var app = angular.module('app', [])
.directive('svgDirective', function () {
return {
template: '<svg xmlns:xlink="http://www.w3.org/1999/xlink"> <g ng-transclude> </g> </svg>',
transclude: true,
type: 'svg',
replace: true
};
})
.directive('svgSquare', function() {
return {
template: '<rect width=100 height=100></rect>',
type: 'svg',
replace: true,
link: function (scope, element, attrs) {
element.on('click', function () {
element.addClass("selected");
});
}
};
});
and the CSS:
.selected {
fill: '#f00'; --> SOLUTION: no quotation mark: fill: #f00;
}
Your CSS file contains an error. You specified the fill color in quotation marks where there should be none. Replace the CSS with the following code and your example is working as intended:
.selected {
fill: #f00;
}
Also note that if you use jQuery as your AngularJS backend, adding CSS classes might be impossible (see this question)