Develop Reference

Datapicker binding with angular and bootstrap

I tried to make an datapicker and a time picker for a website, I found the solution on this site. I use angular and I don't know how can I do to take the value from the input. I tried with ng-model, but didn't work.
Here is the html code:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker();
});
</script>
</div>
How can I solve this issue?
Thanks.

I'd recommend looking into Bootstrap UI. It's a collection of Boostrap UI elements, converted into Angular.js directives. You'll find that using Angular.js Directives will have much better data-binding and support and then using the equivalent jQuery/Javascript plugins.
One of the Bootstrap UI components included in the link is the 'ui.bootstrap.datepicker Directive'. To give you an example of what this directive looks like, and what an Angular-friendly datepicker looks like:
<uib-datepicker ng-model="date" min-date="minDate"></uib-datepicker>

You should use a directive for DOM manipulation.
app.directive('datetimepicker', function() {
return {
restrict: 'A',
link: function(scope, element) {
$(element).datetimepicker();
}
}
});

Angularjs form validation fails on directives

I have a form on a page which is validated just fine if all the form elements are on the page, http://jsfiddle.net/nkanand4/6za8h8xg/1/.
<div ng-form="myform">
<div>
Name: <input type="text" ng-model="user.name" required name="input"/>
</div>
</div>
This, however, stops working if I am doing a wizard kind of form, where each step is populated using directive, http://jsfiddle.net/nkanand4/pe17afvq/2/.
<div ng-form="myform">
<form-element step="selectedStep"></form-element>
</div>
Any ideas on how to solve this will be appreciated. Thanks.
EDIT:
I initially had started with ng-include but dropped that approach because if I use it, the data is not persisted from step 1 to step 2 to back to step 1. Reason being a new scope is created when you move back and forth. Hence I needed a way to keep all the data under a scope property, like $scope.data.user.name, so that i can pass back $scope.data when its requested.

Don't compile HTML yourself, you can let Angular do it properly for you:
.directive('formElement', function($log, $templateCache, $compile) {
return {
template: '<div ng-include="\'step\' + selectedStep.step + \'.html\'">',
link: function(scope, elem, attrs) {
// ... nothing really here
}
};
});
Demo: http://jsfiddle.net/pe17afvq/4/

Finally got it sorted out. This was reported as a bug on angularJS issue tracker, https://github.com/angular/angular.js/issues/7519. The trick is to use the clone in the link function that is returned when you are using $compile.
$compile(html)(scope, function(clone) {
elem.empty().append(clone);
});
Updated my jsfiddle accordingly, and it works!

How to correctly pass data to a modal box defined outside the scope

What I want to accomplish, is to be able to feed the modal box with data data so it can correctly display it. You can see here the jsfiddle where the simple test is located.
http://jsfiddle.net/GabrielBarcia/sjtog46f/1/
In my current learning project, I am using Bootstrap tabs and modal boxes, that is why I have the modal defined on the beginning of the code. On the real project, if I define the modal inside the tabs it is not correctly displayed, therefore I needed to ¨declare¨ it before the tabs start for it to work.
I was hoping that because triggering the modal from inside the controller, the directive on the modal had access to the data, but it seems like I was wrong. I have tried several ways but could not make it work, this is why I am asking for help. I need the directive to be able to show data on the modal as it does on the test of the directive inside the controller. Hope you guys can help
Here is working as I was expecting
<div ng-controller="dataInputCtrl">
<div>
<p>value A :
<input type="textbox" ng-model="userData.a"></input>
</p>
<p>value B :
<input type="textbox" ng-model="userData.b"></input>
</p>
</div>
<div>
<render-item directivedata="userData"></render-item> //Here is ok!
</div>
Here is not
<div class="modal-body">
<render-item directivedata="userData"></render-item> //here not ok
</div>

Simple workaround would be bind the data to both controller and modal directive through a service
angular.module('app', [])
.controller('dataInputCtrl', function ($scope, DataServ) {
// data bound to service
$scope.userData = DataServ.data;
}).factory('DataServ', function () {
return {
data: {}
};
}).directive('renderItem', function (DataServ) {
return {
restrict: 'E',
template: "<p> A = {{data.a}}</br>B = {{data.b}}</p>",
link: function (scope, elem, attrs) {
// data bound to service rather than passed from attribute
scope.data = DataServ.data
}
};
});
You will still find using angular-ui-bootstrap a lot less problematic in the long run. It is heavily used and actively developed
DEMO

How to implement custom form & input directives in AngularJS (solving transcluded scope problems)?

What I tried to do the last days is something like that:
%myform(name='somename' ng-controller='whatever')
%myinput(ng-model='user.firstName' ...
controller has a user structure with firstName, lastname, ...
myform should just add some attributes to the <form>-tag, myinput should render a label, the input field and the errors when the somename-form-element is dirty and invalid. Pretty simple stuff.
As easy everything in AngularJS is, I had no chance. Had to move the ng-controller up to an extra div because nothing worked when the controller is defined in the myform tag (ng-click ignored, ...). Ugly but can live with that. No access to the scope in transcluded directives. Can be fixed with the link function and the append. Problem, the whole form validation stuff is not working when this fix is used. So I can have access to the form OR the scope.
What is the correct way to do this in AngularJS? I am really out of ideas and in despair after 4 days of trying and researching (learned the whole AngularJS in less than a day and not a single other problem).
Don't know if it makes sense to post ~ 30 different versions of trying to get this done. Maybe someone can provide a clean solution that is working and following the ideas behind the AngularJS framework (paypal beer thank you included).
Thank you very much in advance!
Anton
scope-fix-solutions:
http://angular-tips.com/blog/2014/03/transclusion-and-scopes/
Issue with transcoded directives: https://github.com/angular/angular.js/issues/5489
... there are thousands of problems about directives and transcoding, seems to be the most ugly part in Angular. Wanted to include more links to solutions I tried, but I am only allowed to post 2.

If somebody needs the solution (small example) - whole example on Plunker - provided by Sander Elias, many thanks!
HTML:
<body ng-controller='AppController as appVm'>
<h1>Hello angular {{appVm.version}}</h1>
<my-form name="test">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" ng-model='appVm.user' required placeholder="Username" name='username' ng-minlength=5>
</div>
<div ng-hide="test.$pristine">
<div ng-show="test.username.$error.required" class="alert alert-danger" role="alert">this is a required field</div>
<div ng-show="test.username.$error.minlength" class="alert alert-danger" role="alert">At least 5 chars</div>
</div>
<button class="btn btn-primary" ng-show='test.$touched || test.$valid'>submit</button>
</my-form>
</body>
JavaScript:
angular.element(document).ready( function() {
// generate module
myModule = angular.module( 'myApp',[]);
// define a simple controller and put the user's name into the scope
myModule.controller('SampleController', ['$scope', function ($scope) {
$scope.user = {
name: 'Hugo'
};
}]);
// make the form directive (just put the two attributes in the form...)
myModule.directive('myform', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<form ng-attr-name="{{name}}" autocomplete="off" novalidate=true>' +
'<fix-transclude></fix-transclude>' +
'</form>',
scope: {
name: '#'
},
link: function (scope, elm, attr, contrl, transclFn) {
scope.$parent[scope.name] = scope[scope.name];
// attach the parent scope (originating one!) to the transcluded content!
transclFn(scope.$parent,function (clone) {
elm.find('fix-transclude').replaceWith(clone);
});
}
}
});
// bootstrap AngularJS
angular.bootstrap(document, ['myApp']);
});

Doesn't work validation on form passed to directive AngularJS

I'm building a web application using AngularJS, and I have a doubt because I don't know what is the best approach to implement a directive that use input forms. I have the following directive:
angular.module('myApp').directive('personal', [function () {
return {
restrict: 'E',
scope : {
model : '=ngModel',
label : '#',
},
require: '^form',
templateUrl : 'personal.html',
link: function (scope, iElement, iAttrs, ngModelController) {}
};
}]);
personal.html
<input type="text" name="name{{label}}" ng-model="model.name" ng-pattern="/^[A-Za-z]*$/">
<div class="error-container" ng-show="data.name{{label}}.$invalid">
<small class="error" ng-show="data.name{{label}}.$error.pattern">Invalid format</small>
</div>
index.html
....
<form novalidate name="data">
<personal label="personal" ng-model="general"></personal>
<!-- here I will need add more tags 'personal' ..is a requirement -->
</form>
...
The form is presented well. But .. when the input name{{label}} have a invalid content, the error message is not showed (if I put the templateUrl content on index.html, that works).
Thanks for advance.

Your data.whatever in your templateUrl does not have access to the form controller. You have created an isolate scope thus it has no access to the form name=data. I'm not at my computer now, so I can't give you solid examples, but read up on form controllers.