i have a custom directive where i implemented ng-change:
moduloDirettive.directive('inputDir',function () {
return {
restrict : 'EA',
transclude : 'true',
replace: true,
scope : {
collectorId : '#',
label : '#',
model : '=',
disable : '=?',
placeholder : '#',
formName : '=',
help : '#',
type : '#',
change : '&',
min : '=',
max : '=',
fieldName : '#',
config : '=',
required : '=',
tooltip: '=',
pattern : '=ngPattern',
},
templateUrl : currentScriptPath + 'input.html',
link : function (scope, elm, attrs, ngModelCtrl) {
if (scope.config) {
scope.class = scope.config.class;
scope.type = scope.config.type;
}
scope.onChange = function () {
setTimeout(scope.change, 0);
}
},
controller: ['$scope', '$labelRegistrationDirFactory', function($scope, $labelRegistrationDirFactory){
if ($scope.label && $scope.label != '' && $scope.collectorId && $scope.collectorId != '') {
$labelRegistrationDirFactory.register($scope.collectorId, $scope.fieldName, $scope.label);
}
}]
};
});
I used it on this field:
<input-dir label="{{::translate('rito.descrizioneregistro')}}"
required="true" form-name="form" field-name="descrizioneregistro"
model="formDataDetail.descrizioneRegistro" change="descrizioneRito()"></input-dir>
and this is how i assign value:
$scope.descrizioneRito = function() {
$scope.formDataDetail.descrizioneRitoAV = $scope.formDataDetail.descrizioneRegistro;
}
but whenever i write inside the input, it lags by one action, so if if i write "try", i will have "tr" on the other input, and so on.
How can i fix this?
Thank you
Related
I have this angular.directive
V1.App.directive('v1DatePicker', ['$compile', function ($compile) {
return {
restrict: "E",
require: [
'ngModel'
],
isolated:true,
scope: {
id: '#',
ngModel: '='
},
link: function(scope, element, attrs, requireds) {
},
template: '<md-datepicker id="id" ' +
' ng-model="internalValue" ' +
' md-placeholder="DD/MM/YYYY"></md-datepicker>'
}
}]).directive('v1MonthPicker', ['$compile', function ($compile) {
return {
restrict: "E",
require: [
'ngModel'
],
isolated:true,
scope: {
id: '#',
ngModel: '='
},
link: function(scope, element, attrs, requireds) {
},
template: '<md-datepicker id="id" ' +
' ng-model="internalValue" ' +
' md-placeholder="MM/YYYY"></md-datepicker>'
}
}]).config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function (date) {
return date ? moment(date).format('DD/MM/YYYY') : '';
};
$mdDateLocaleProvider.parseDate = function (dateString) {
var m = moment(dateString, 'DD/MM/YYYY', true);
return m.isValid() ? m.toDate() : new Date(NaN);
};
}]);
My point is: how can I define two different formatDate and parseDate? Both directive does the same, I just want that when I select a date from the first one, I see for example 23/03/2018 and from the second one 03/2018.
Is it possible or not?
Thank to everybody.
Here i am created custom directive for show and hide particular field from json data , here my problem is angular version, in low version its working ( https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js), but high version its not supporting (https://code.angularjs.org/1.3.15/angular.js)
please check the below link
http://plnkr.co/edit/h3MrWQjopbqzYa0Y5pOT?p=preview
var app = angular.module('testApp', []);
app.directive('telBasictext1', ['$http', 'telngshowservice', function($http, telngshowservice) {
return {
restrict: 'AEC',
require: 'ngModel',
scope: {
ngModel: '=',
placeHold: '#',
checkId: '#',
className: '#',
ngmaxLength: '#',
ngminLength: '#',
lblvalue: '#',
textboxSize: '#',
lblSize: '#',
validate: '#',
ngShow: '#',
textboxtype: '#',
getString: '#',
position: '#',
labelPosition: '#',
textboxPosition: '#',
canShow: '#',
showorhide: '#',
},
template: '<div id="{{ checkId }}" class="form-group" ng-show="true" > ' +
'<label size="lblSize" class="col-sm-{{ labelPosition }} control-label" id="textboxchanges"> Test </label>' +
'<div class="col-sm-{{ textboxPosition }}"> <input type="{{ textboxtype }}" ng-model="ngModel" placeholder="{{ placeHold }}" id="{{checkId}}" class="{{className}}" minlength="{{ ngminLength }}" maxlength="{{ ngmaxLength }}" size="{{ textboxSize }}" ng-required="{{ validate }}" ></div></div>',
link: function(scope, iElement, iAttrs, ngModelController) {
var ngshow = iAttrs.canShow;
var ngsplitValues = ngshow.split(",");
var nglanguage = ngsplitValues[0]; // Language EN or Fr
var nglabelName = ngsplitValues[1]; // Label Name
var ngmoduleName = ngsplitValues[2]; // Module Name (global or local)
telngshowservice.getdata(ngmoduleName).success(function(data) {
scope.showorhide = data[nglabelName];
console.log(scope.showorhide)
})
}
};
}]);
app.factory('telngshowservice', ['$http', function($http) {
var dataFactory = {};
var lang = window.localStorage.language;
dataFactory.getdata = function(moduleName) {
if (moduleName == 'common') {
return $http.get(labeli18nPath + '/translation_' + lang + '.json');
} else {
return $http.get('OPlayout.json');
}
};
return dataFactory;
}]);
This is due to breaking changes in the $parse service in version 1.3.0-beta.14:
core: due to bdfc9c02, values 'f', '0', 'false', 'no', 'n', '[]' are
no longer treated as falsy. Only JavaScript falsy values are now
treated as falsy by the expression parser; there are six of them:
false, null, undefined, NaN, 0 and "".
Use booleans instead of strings:
{
"pSearchPatient": false,
"pAddressNo" : true,
"pBuilding": true
}
I'm trying to make a ng-repeat on the source below, before'm dealing with commas.
My intention is to make a directive, and insert in checkboxes.
I need to turn this into a JSON? How?
Teste1\nTeste2\nTeste3\nTeste4\nTeste5
Directive:
.directive('fieldCreate', function($compile, $timeout) {
return {
restrict : 'E',
require : 'ngModel',
replace : true,
template : '<ng-include src="getTemplateUrl()"/>',
scope : {
'field': '=',
'model': '=ngModel'
},
controller: function($scope) {
$scope.field.opts = $scope.field.opts.split(/\n/);
$scope.getTemplateUrl = function() {
if ($scope.field.type == "input") return "partials/fields/show/input.html";
if ($scope.field.type == "textarea") return "partials/fields/show/textarea.html";
if ($scope.field.type == "checkbox") return "partials/fields/show/checkbox.html";
};
}
};
});
How to get instances of ngModel and SelectBoxController in Link function?
Directive
angular
.module('directives.selectBox', [])
.directive('selectBox', selectBox);
function selectBox() {
return {
restrict : 'E',
require : ['ngModel'],
scope : {
list : '=',
},
replace : true,
templateUrl : 'common/directives/selectBox/selectBox.html',
controller : SelectBoxController,
link: function(scope, element, attrs, controllers) {
console.log(controllers);
}
};
}
Use 'require' to get both the ngModelController and SelectBoxController:
function selectBox() {
return {
restrict : 'E',
require : ['ngModel','selectBox'],
scope : {
list : '=',
},
replace : true,
templateUrl : 'common/directives/selectBox/selectBox.html',
controller : SelectBoxController,
link: function(scope, element, attrs, controllers) {
console.log(controllers[0]);
console.log(controllers[1]);
}
};
}
I can't get ng-show on my spinningElement to work. I have an isolated scope, for the directive, but since it is an element inside I'd think it should work?
Anyone have an Idea of what I am doing wrong?
Code snippet:
angular.module('lr.upload.directives').directive('uploadButton', [
'upload',
function(upload) {
return {
restrict: 'EA',
scope: {
data: '=?data',
url: '#',
param: '#',
method: '#',
onUpload: '&',
onSuccess: '&',
onUploadTest: '&',
onError: '&',
onComplete: '&'
},
link: function(scope, element, attr) {
scope.uploading=false;
var el = angular.element(element);
var fileInput = angular.element('<input type="file" />');
var spinningElement = angular.element('<img ng-show="uploading" class="uploadSpinner" src="../../img/loading.gif" />');
el.append(fileInput);
el.append(spinningElement);
Solution:
angular.module('lr.upload.directives').directive('uploadButton', [
'upload', '$compile',
function(upload, $compile) {
return {
restrict: 'EA',
scope: {
data: '=?data',
url: '#',
param: '#',
method: '#',
onUpload: '&',
onSuccess: '&',
onUploadTest: '&',
onError: '&',
onComplete: '&'
},
link: function(scope, element, attr) {
scope.uploading = false;
var el = angular.element(element);
var fileInput = angular.element('<input type="file" />');
var spinningElement = $compile('<img ng-show="uploading" class="uploadSpinner" src="../../img/loading.gif" />')(scope);
el.append(fileInput);
el.append(spinningElement);
I think you should use $compile for make it work
var spinningElement = $compile('<img ng-show="uploading" class="uploadSpinner"
src="../../img/loading.gif" />')(scope);