We Keep Coding

I pass scope values to my directive but it's undefined

I have a problem to pass into my directive 3 parameters from the scope of my controller.
See the directive :
angular.module('app.administration').directive('wcModuleForm', function()
{
return {
restrict: 'E',
scope: {
'module': '=',
'applications': '=',
'standards': '='
},
templateUrl: 'app/administration/directives/module/wc-module-form.tpl.html',
link: function(scope, form)
{
form.bootstrapValidator({...});
}
};
});
And in the html i call the directive :
<wc-module-form
module="moduleForm"
applications="applications"
standards="standards">
</wc-module-form>
The 3 values moduleForm, applications and standards are in my scope controller.
But when i test in the template of the directive, all values are undefined, i don't understand why?
<h4>module : {{(module === undefined) ? 'undefined' : 'defined'}}</h4> -> **undefined**
<h4>applications : {{(applications === undefined) ? 'undefined' : 'defined'}}</h4> -> **undefined**
<h4>standard : {{(standards === undefined) ? 'undefined' : 'defined'}}</h4> -> **undefined**
when i put a watch on 'module' in the link function of the directive with a console.log, nothing at all.
the template of the directive is a bootstrap modal which contain a form to add or edit a module :
<div class="modal fade" id="moduleFormModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">{{ (module.id !== undefined) ? "Ajout d'un module" : "Edition d'un module" }}</h4>
<h4>module : {{(module === undefined) ? 'undefined' : 'defined'}}</h4>
<h4>applications : {{(applications === undefined) ? 'undefined' : 'defined'}}</h4>
<h4>standard : {{(standards === undefined) ? 'undefined' : 'defined'}}</h4>
</div>
<div class="modal-body">
<form id="movieForm" method="post" class="ng-pristine ng-valid bv-form" novalidate="novalidate">
<button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
<div class="form-group">
<label class="control-label">Nom</label>
<input type="text" class="form-control" name="name" ng-model="module.name">
</div>
<div class="form-group">
<label class="control-label">Pictogramme</label>
<input type="text" class="form-control" name="picto" ng-model="module.picto">
</div>
<div class="form-group">
<label class="control-label">Couleur</label>
<input type="text" smart-colorpicker class="form-control" name="color" ng-model="module.color">
</div>
<div class="form-group">
<div class="selectContainer">
<label class="control-label">Application</label>
<select class="form-control" name="application" ng-model="module.application_id">
<option ng-repeat="application in applications" value="application.id">{{ application.name }}</option>
</select>
</div>
</div>
<div class="form-group">
<div class="selectContainer">
<label class="control-label">Standard</label>
<select class="form-control" name="standard" ng-model="module.standard_id">
<option ng-repeat="standard in standards" value="standard.id">{{ standard.name }}</option>
</select>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Sauvegarder</button>
</div>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
and the controller :
'use strict';
angular.module('app.administration')
.controller('AdministrationCtrl', ['$scope', '$rootScope', '$http', 'APP_CONFIG', function($scope, $rootScope, $http, APP_CONFIG)
{
/**
* différentes applications existantes
* #type [{object}]
*/
$scope.applications = [];
/**
* différentes standards existantes
* #type [{object}]
*/
$scope.standards = [];
/**
* module pour le formulaire
* #type {{}}
*/
$scope.moduleForm = {id: 5,
name: 'Fonction',
standard_id: 2,
application_id: 1,
picto: 'fa fa-gears',
color: '#F20E0E'};
}]);
So, if you have an idea, thanks in advance.

it's good i find a solution :
see the directive :
angular.module('app.administration').directive('wcModuleForm', function()
{
return {
restrict: 'E',
scope: {
module: '=',
applications: '=',
standards: '='
},
templateUrl: 'app/administration/directives/module/wc-module-form.tpl.html',
link: function($scope, form)
{
form.bootstrapValidator({...});
}
};
});
i add a '$' to scope and it's good :)
but i don't understand why it's work now so if someone know why, he will can explain it to me. thanks :)

Is this what you are looking for?
(function () {
'use strict';
angular
.module('app.administration')
.directive('wcModuleForm', wcModuleForm);
wcModuleForm.$inject = [];
function wcModuleForm() {
return {
restrict: 'E',
scope: {
module: '=',
applications: '=',
standards: '='
},
controller: function ($scope) {
form.bootstrapValidator({
module: $scope.module,
applications: $scope.applications,
standards: $scope.standards
});
},
template: '<div>{{ module }}{{ applications }}{{ standards }}</div>'
}
}
}());

Try with removing the quotes from your scope attributes in wcModuleForm directive.
Like this:
return {
restrict: 'E',
scope: {
module: '=',
applications: '=',
standards: '='
},
templateUrl: 'app/administration/directives/module/wc-module-form.tpl.html',
link: function(scope, form)
{
form.bootstrapValidator({...});
}
};
If it doesn't work, maybe module is a predefined attribute. Try using another name. Like <directive data-application="..."></directive> will not work because data is reserved.

Angularjs: Validating directive components with or without forms

I have a very simple modal which contains a text area and a button. I have created a directive for the text area as follows:
app.directive('vipTextArea', function() {
return {
restrict: 'E',
templateUrl: 'app/common/textArea-partial.html',
require: 'ngModel',
scope: {
textAreaLabel: '#',
textAreaName: '#',
textRequired: '#',
iconLabel: '#',
textAreaIcon: '#',
formName: '#',
value : '=ngModel'
}
}
});
And here is the template:
<div class="col-sm-8 noPadding">
<label>{{ textAreaLabel }}</label>
</div>
<div class="col-sm-4 noPadding rightAlign">
<vip-button-icon button-title="{{ iconLabel }}" icon-class="{{ textAreaIcon }}"></vip- button-icon>
</div>
<br/>
<textarea name="{{ textAreaName }}" ng-model="value" class="textAreaSize" ng-required=" {{ textRequired }}" ng-class="{ inputError: ({{ formName }}.{{ textAreaName }}.$error.required && {{ formName }}.{{ textAreaName }}.$dirty) }"></textarea>
<p class="errorMsg" ng-show="{{ formName }}.{{ textAreaName }}.$error.required && {{ formName }}.{{ textAreaName }}.$dirty">This field is required</p>
I am using this directive here:
<form name="viewCertificate">
<modal-header modal-title="View Certificate"></modal-header>
<div class="modal-body modalBodyHeight">
<vip-text-area form-name="viewCertificate" text-area-name="certificate" text-area-label="Certificate text below" text-required="true" icon-label="Upload" text-area-icon="upload" ng-model="certificate"></vip-text-area>
</div>
<div class="modal-footer">
<vip-button form-name="viewCertificate" button-title="Ok" button-size="small" button-color="blue" ng-click="ok()"></vip-button>
<vip-button form-name="viewCertificate" button-title="Cancel" button-size="small" button-color="white" ng-click="cancel()" class="buttonMargin"></vip-button>
</div></form>
All I am trying to achieve is validate the text area if it is empty. I am a newbie to angular, so please correct me if I am using this incorrectly. I am planning on using other directives like custom input fields, so need a common solution for all possible components.

You need to add your form to your directive scope like this:
.directive('vipTextArea', function() {
return {
require: ['^form','ngModel'],
restrict: 'E',
templateUrl: 'app/common/textArea-partial.html',
scope: {
textAreaLabel: '#',
textAreaName: '#',
textRequired: '#',
iconLabel: '#',
textAreaIcon: '#',
formName: '#',
value : '=ngModel'
},
link: function(scope, elem, attrs, ctrl){
scope.form = ctrl[0];
}
}
and then update your paragraph with the scope form:
<p ng-show="form.{{ textAreaName }}.$invalid && form.{{ textAreaName }}.$dirty">This field is required</p>

directive not generating html

I am having a problem with my code basically i have this span (dynamically created via ng-repeat)
<span my-size id="abc"></span>
<span my-size id="def"></span>
<span my-size id="ghi"></span>
what I need to achieve is to get the id of each span and split its character and created checkbox and used the split[] i get when i split the id to be its value
<span id="abc">
<input type="checkbox" value="a">
<input type="checkbox" value="b">
<input type="checkbox" value="c">
</span>
<span id="def">
<input type="checkbox" value="d">
<input type="checkbox" value="e">
<input type="checkbox" value="f">
</span>
<span id="ghi">
<input type="checkbox" value="g">
<input type="checkbox" value="h">
<input type="checkbox" value="i">
</span>
could anyone help me do this in angular js directives
this is all i have so far :
myApp.directive('mySize', function () {
return {
restrict: 'E',
scope: { html: '#' },
template: '<span ng-bind-html="html"></span>',
link : function (scope, element, attrs) {
scope.html="<h1>sample html </h1>";
}
}
});
I can't go further since my directives wont generate html tags

I'm not sure what your initial intention was when writing the directive, because there is really no need to either use a link-function or ng-bind-html.
For what you've asked the directive could be as simple as:
(function (app, ng) {
'use strict';
app.directive('mySize', function () {
return {
restrict: 'A',
scope: { id: '#id' },
template: '<input type="checkbox" data-ng-repeat="char in id track by $index" value="{{ char }}">'
}
});
}(angular.module('app', []), angular));
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<div data-ng-app="app">
<span data-my-size id="abc"></span>
<span data-my-size id="def"></span>
<span data-my-size id="ghi"></span>
</div>
Edit
If you you want to add extra information just fiddle with the template. E.g.:
(function (app, ng) {
'use strict';
app.directive('mySize', function () {
return {
// actually obsolute, because it's the default setting
restrict: 'A',
// reusing the directive name to simplify the required view-html,
// but mapping it to a more fitting name when used internally
scope: { str: '#mySize' },
// the actual template (this time using a label)
template: '<label data-ng-repeat="char in str track by $index"><input type="checkbox" value="{{ char }}"> {{ char }}</label>'
}
});
}(angular.module('app', []), angular));
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<div data-ng-app="app">
<div data-my-size="abc"></div>
<div data-my-size="def"></div>
<div data-my-size="ghi"></div>
</div>

It doesn't work because you restricted it's usage to element and use it as attribute. Change restrict: 'E' to restrict: 'A'.

var app = angular.module('app', []);
app.directive('mySize', function($sce) {
return {
restrict: 'EA',
scope: {
id: '#'
},
template: '<label ng-repeat="i in array"><input type="checkbox" ng-value="i" >{{i}}<label>',
link: function(scope, element, attrs) {
scope.array = scope.id.split("")
}
}
});
app.controller('homeCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<span my-size id="abc"></span>
<span my-size id="def"></span>
<span my-size id="ghi"></span>
</div>
</div>

The directive can look like this:
.directive('mySize', function() {
return {
restrict: 'AE',
link: function(scope, element, attrs) {
element[0].id.split('').map(function(el) {
element.append('<label><input type="checkbox" value="' + el + '"> ' + el + '</label>');
});
}
}
});
Demo: http://plnkr.co/edit/nZMEdUjMXG3MDYv19H5C?p=preview

datepicker value not binding to model in angular using custom directive

i am using datepicker and want to bind its value i wrote custom directive for it but know why its not binding value .
HtmlTagsdatepicker
<div class="col-md-6">
<label for="datepicker" class="col-lg-5 form-label">Date Of Birth:</label>
<div class="col-lg-7">
<input type="text" class="form-control dateBirth" ng-model="user.dob" id="datepicker" name="datepicker" datepicker="" value="" placeholder="Date Of Birth" required/>
<div class="error" ng-show="newUser_form.datepicker.$dirty && newUser_form.datepicker.$invalid">
<small class="error errorFields" ng-show="newUser_form.datepicker.$error.required">
Date is required.
</small>
</div>
</div>
</div
>
datepickerDirective.js
app.directive('datepicker', function() {
var linker = function(scope, element, attrs, ngModelCtrl) {
element.datepicker().on('changeDate', function(value){
var dateStrToSend = value.date.getFullYear() + '/' + (value.date.getMonth() + 1) + '/' + value.date.getDate();
ngModelCtrl.$setViewValue(dateStrToSend);
$(".datepicker").hide();
});
}
return {
require: 'ngModel',
restrict: 'A',
link: linker
}
});

I think you aren't in a digest cycle. Try $apply
element.datepicker().on('changeDate', function(value){
var dateStrToSend = value.date.getFullYear() + '/' + (value.date.getMonth() + 1) + '/' + value.date.getDate();
scope.$apply(function () {
ngModelCtrl.$setViewValue(dateStrToSend);
});
$(".datepicker").hide();
});

AngularJS: Select directive validation

I created a directive with select template but i need the "name" tag so i can put a validation and i don't know how to add that. I tried adding attr but it didn't work.
Here is the fiddle
<form name="newForm" ng-submit="save()">
<div>
Name: <input required ng-model="newSupplier.Name" name="myName" type="text" required/>
<span ng-show="newForm.myName.$error.required">*</span>
<br />
Status: <keywords name="myStatus" title="Choose Status" label="" array="myKeyword" keyword-type="ActivityType" supplier-id="newSupplier.Id" opt-value="Id" opt-description="Description"></keywords>
<span ng-show="newForm.myStatus.$error.required">*</span>
<br>
<button type="submit">Save</button>
<br /><i>How to save the ID of the selected dropdown?</i>
</div>
</form>
JS
app.directive('keywords', function(){
return {
restrict: 'E',
scope: {
array: '=',
supplierId : '='
},
template: '<label>{{label}}</label>' +
'<select ng-model="supplierId" ng-options="a[optValue] as a[optDescription] for a in array | filter: keywordType">' +
'<option style="display: none" value="">-- {{title}} --</option>' +
'</select>',
link: function (scope, element, attrs) {
scope.label = attrs.label;
scope.title = attrs.title;
scope.optValue = attrs.optValue;
scope.optDescription = attrs.optDescription;
scope.keywordType = attrs.keywordType;
}
};
});

You need to add "required" to your "keywords" directive to make validation works.
template: '<label>{{label}}</label>' +
'<select ng-model="supplierId" ng-options="a[optValue] as a[optDescription] for a in array | filter: keywordType" required>' +
'<option style="display: none" value="">-- {{title}} --</option>' +
'</select>',
This is the updated demo
Hope this is helpful for you.