What i am doing is creating one custom control with form-name, name, model, title attributes , that replace with a template with the textbox with respective validations
HMTL:
<form name="usrForm" novalidate>
<input-req form-name="usrForm" ctrl-name="myname" ng-model="user.name" my-title="Name"></input-req>
</form>
JS:
var app = angular.module("demo", []).controller('demoCtrl', ["$scope", function ($scope) {
}]);
app.directive("inputReq", function () {
return {
restrict: "E",
template: function (element, attrs) {
return '<div class="form-group" ng-class="{ \'has-error\' : ' + attrs.formName + '.' + attrs.ctrlName + '.$invalid && !' + attrs.formName + '.' + attrs.ctrlName + '.$pristine }"><label>' + attrs.myTitle + '</label><input type="text" name="' + attrs.ctrlName + '" placeholder="' + attrs.myTitle + '" class="form-control" ng-model="' + attrs.ngModel + '" required><p ng-show="' + attrs.formName + '.' + attrs.ctrlName + '.$invalid && !' + attrs.formName + '.' + attrs.ctrlName + '.$pristine" class="help-block">You name is required.</p></div>';
},
}
});
This was working fine, i need to separate the HTML, i created a new html and shifted the HTML but its not working
How to do it, any one kindly suggest some solutions
I TRIED THIS:
app.directive("inputReq", function () {
return {
restrict: "E",
replace: true,
scope: {
form: '=formName',
name: '=ctrlName',
model: '=ngModel',
title: '=myTitle'
},
templateUrl: "input-req.html",
link: function (scope, element, attr) {
scope.attrs = attr;
}
};
});
input-req.html:
<div class="form-group" ng-class="{ 'has-error' : {{attrs.formName}}.{{attrs.ctrlName}}.$invalid && !{{attrs.formName}}.{{attrs.ctrlName}}.$pristine }">
<label>{{attrs.myTitle}}</label>
<input type="email" name="name" placeholder="{{attrs.ngModel}}" class="form-control" ng-model="{{attrs.ngModel}}" required>
<p ng-show="{{attrs.formName}}.{{attrs.ctrlName}}.$invalid && !{{attrs.formName}}.{{attrs.ctrlName}}.$pristine" class="help-block">You title is required.</p>
</div>
THROWN ERROR:
Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{attrs.ngModel}}] starting at [{attrs.ngModel}}].
