Using AngularJS ngDialog.
Expecting that the CSS in the document is applied to the ngDialog, but it hwas not applied.
Code:
<script type="text/ng-template" id="attach_account_template">
<div id="attach_account_div" ng-controller="Opportunity_Controller" style="width:250px">
<input type="text" class="form-control" id="account_name" style="width:200px;height:35px" />
<input id="btn_account" type="button" style="margin-left:10px;height:35px;width:50px" value="GO" />
</div>
</script>
$scope.attach_account = function () {
//attach_account_template
ngDialog.open({ template: 'attach_account_template', scope: $scope });
};
Related
I am trying to change how the error element is displayed. I am using the Bulma UI framework, and want the error message to be displayed in the following. The structure should look like the following. It should also remove the "li" tags around the error message:
<article class='message'>
<div class="message-body content">
<p> ERROR DISPLAYS HERE </p>
</div>
</article>
My attempt to fix it was as follows:
const parsleyConfig = {
errorElem: '<div class="message-body"></div>',
errorsWrapper: '<article class="message"></article>'
};
$('#myForm').parsley(parsleyConfig);
However, only the errorsWrapper seems to be working, the errorElem does not apply to the error message at all.
As Marc-André Lafortune stated, you're using Parsley.js v1.x.x, so errorsWrapper and errorElem should be defined in errors configuration. Here is a simple implementation of Parsley.js v1 based on your code:
$(function() {
const parsleyConfig = {
errors: {
container: function (elem) {
return elem.next('article.message');
},
errorsWrapper: '<div class="message-body content"></div>',
errorElem: '<p></p>'
}
};
$('#myForm').parsley(parsleyConfig);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/1.2.3/parsley.min.js"></script>
<form action="" method="" id="myForm">
<input type="text" name="field" parsley-required="true">
<article class="message"></article>
<input type="submit" value="Submit Form">
</form>
And here is a Parsley.js v2 implementation:
$(function() {
const parsleyConfig = {
errorsContainer: function (elem) {
return elem.$element.next('article.message');
},
errorsWrapper: '<div class="message-body content"></div>',
errorTemplate: '<p></p>'
};
$('#myForm').parsley(parsleyConfig);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.1/parsley.js"></script>
<form action="" method="" id="myForm">
<input type="text" name="field" required>
<article class="message"></article>
<input type="submit" value="Submit Form">
</form>
What version of Parsley are you using? errorElem is Parsley 1.x...
Use errorsContainer, errorsWrapper, and errorTemplate.
This is my directive code:
'use strict';
demo.directive('myModal', function($parse) {
return {
restrict: 'A',
transclude: true,
scope: '#',
template: '<div ng-transclude><h4>Please enter value</h4></div>'
}
});
Usage is as follows:
<!-- myModal directive -->
<div my-modal>
<input type="text" ng-model="myTest" />
<input type="button" ng-click="getMyTest()" value="Get Value" />
</div>
And my main controller, which wraps the whole application, includes this:
demo.controller('MainCtrl', function($scope) {
$scope.getMyTest = function(){
alert($scope.myTest);
}
});
Any ideas why can't I access myTest?
JsFiddle: http://jsfiddle.net/sZZEt/679/
You should use the dot-notation:
demo.controller('MainCtrl', function($scope) {
$scope.data = {};
$scope.getMyTest = function(){
alert($scope.data.myTest);
}
});
and
<div my-modal>
<input type="text" ng-model="data.myTest" />
<input type="button" ng-click="getMyTest()" value="Get Value" />
</div>
JSFIDDLE
Transclusion creates a child scope, that's why you should use the dot-notation for ng-model.
try this. add directive to model element.
<div>
<input my-modal type="text" ng-model="myTest" />
<input type="button" ng-click="getMyTest()" value="Get Value" />
</div>
For few days I was trying to debug why my directive doesn't work. No event has been fired when I press a button. Finally I found which line breaks everything!
Inside template html I have line datepicker-popup ng-model="{{model}}" min-date="{{minDate}}" is-open="{{isOpened}}" if I remove it everything works well. But it is essential part in my custom directive and I want to keep it. I assume problem is that I am using directive inside custom directive?
Could you please help me to identify problem and find a correct solution?
Thanks for any help!
Directive:
(function(){
function directive(){
return {
scope :{
model:'=model',
minDate:'=minDate',
isOpened:'=isOpened'
},
restrict: 'E',
templateUrl: 'templates/datepicker/datepicker.html',
controller: 'Ctrl'
};
};
app.directive('myDirective', directive);
})();
controller:
(function(){
function Controller($scope) {
$scope.open = function() {
alert('HELLO');
};
app.controller('Ctrl', Controller);
})();
template html:
<fieldset>
<div class='input-group'>
<input type="text" class="form-control" datepicker-popup ng-model="{{model}}" min-date="{{minDate}}" is-open="{{isOpened}}" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span ng-click="open()" class="btn btn-default input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</fieldset>
As mentioned in the other answer, you don't need the curly braces in your template because it's a two way binding.
The problem with your click function is probably the isolated scope of your custom directive.
If you'd like to have the open method in your main controller you could pass it to the isolated scope.
Please find below a demo of your directive or here at jsfiddle.
angular.module('demoApp', ['ui.bootstrap'])
.controller('mainController', Controller)
.directive('customDir', Directive);
function Directive() {
return {
scope: {
model: '=',
minDate: '=',
isOpened: '='
},
transclude: true,
restrict: 'E',
templateUrl: 'templates/datepicker/datepicker.html',
//controller: 'Ctrl'
controller: function($scope) {
$scope.open = function() {
console.log('open popup now!!');
$scope.isOpened = true;
};
}
};
}
function Controller($scope) {
$scope.open = function () {
alert('HELLO'); // not called becasue of isolated scope of custom directive
};
$scope.dateModel = {
date: new Date(),
min: new Date()
};
$scope.isOpened = false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap-tpls.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-app="demoApp" ng-controller="mainController">
<script type="text/ng-template" id="templates/datepicker/datepicker.html">
<fieldset>
<div class='input-group'>
<input type="text" class="form-control" datepicker-popup="" ng-model="model" min-date="minDate" is-open="isOpened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span ng-click="open()" class="btn btn-default input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</fieldset>
</script>
<custom-dir model="dateModel.date" min-date="dateModel.min" is-opened="isOpened"></custom-dir>
</div>
When you define your directive's scope properties with a = symbol, you don't need to use {{}} in your views.
Remove the {{}} from your view:
<input type="text" class="form-control" datepicker-popup ng-model="model" min-date="minDate" is-open="isOpened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
Here's more info regarding directive's scope properties using =, & and #.
I want to add 'ng-repeat="n in counter"' to the 'form' tag inside my directive. How do I do this?
I tried accessing the element via compile but tElement.find('form') does not work.
See : http://jsfiddle.net/fea40v2c/1/
I tried all these variations:
console.log(tElement.find('form')); // fails
console.log(tElement[0].querySelector('form')); // null
console.log(document.querySelector('form')); // fails
Do you really need the add button to be defined by the directive's user? Because if you don't you can do this.
<script id="repeatableForm.html" type="text/ng-template">
<input type="button" value="add" ng-click="add()">
<div ng-repeat="c in counter">
<div ng-transclude></div>
</div>
</script>
Update
After a little work I got something that allows the user to provide their own markup for the add button. It a bit more complicated and involves a nested directive. A few points that are good to know:
The repeatableForm directive has no isolated scope. It modifies the host scope by adding/overwriting the repeatableForm property. This means multiple such directives cannot execute in the same host scope.
The repeatableForm publishes its controller in its host scope as the repeatableForm property. This is better than publishing the controller's methods directly in the scope because it namespaces those methods and leaves the host scope cleaner.
The view
<repeatable-form>
<input type="button" value="add" ng-click="repeatableForm.add()"/>
<form action="">
First Name: <input name="fname" type="text" />
Last Name: <input name="lname" type="text" />
<input type="checkbox" name="food" value="Steak"/> Steak
<input type="checkbox" name="food" value="Egg"/> Egg
<input type="button" value="remove" ng-click="repeatableForm.remove($index)" />
</form>
</repeatable-form>
The directives
app.directive('repeatableForm', function () {
return {
templateUrl:'repeatableForm.html',
restrict: 'E',
transclude: true,
controller: function () {
var repeatableForm = this
repeatableForm.add = function () {
repeatableForm.forms.push(repeatableForm.forms.length + 1);
};
repeatableForm.remove = function (index) {
repeatableForm.forms.splice(index, 1);
};
repeatableForm.forms = [1, 2, 3];
},
controllerAs: 'repeatableForm',
};
});
app.directive('form', function () {
return {
templateUrl: 'repeatedForm.html',
restrict: 'E',
transclude: true,
};
})
The templates
<script id="repeatableForm.html" type="text/ng-template">
<div ng-transclude></div>
</script>
<script id="repeatedForm.html" type="text/ng-template">
<div ng-repeat="form in repeatableForm.forms"><div ng-transclude></div></div>
</script>
Check this demo.
I have a simple page that contains a 3 step wizard. Basically, the user fills out a textbox, clicks next, which loads the next form field.
I have setup all the HTML inside a template and use that template in a backbone view.
The problem is, backbone isn't rendering the HTML inside the template. I just get a blank screen.
Here is my template:
<script type="text/template" id="assessmentTitleTemplate">
<div id="titleDiv">
<label for="title">Title:</label> <input type="text" />
</div>
<div id="choicesDiv" style="display: none;">
<label for="choices">Choices:</label><input type="text" />
</div>
<div id="typeDiv" style="display: none;">
<label for="types">Types:</label>
<select name="type">
<option>red</option>
<option>blue</option>
<option>green</option>
</select>
</div>
<div id="directionControl">
<input type="button" value="Prev" /> <input type="button" value="Next" />
</div>
</script>
This is my backbone javascript code:
"use strict";
var titleView = Backbone.View.extend({
tagName: 'div',
className: 'title',
template: _.template($('#assessmentTitleTemplate').html()),
events: {
'click .next': 'saveProceedNext',
'click .prev': 'ProceedPrev'
},
initialize: function () {
this.render;
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
saveProceedNext: function() {
this.$('#titleDiv').hide();
this.$('#choicesDiv').show();
},
ProceedPrev: function() {
}
});
Your code is correct, but you're missing a couple of parens in your initialize body:
initialize : function () {
this.render(); // it was this.render; before
}
Your code isn't invoking the function.
Also, you're missing class tags for your buttons, or else they won't work when clicked. Adding this will make them work:
<input type="button" value="Prev" class="prev" /> <input type="button" value="Next" class="next" />
Check this JSFiddle.