I am trying to develop a general validation directive. My main goal is to apply the directive to the parent input element and use this directive, I want to add validation state, for example, has-errorand the has-successclasses provided by Bootstrap.
I can do it in chrome. However, my problems start with IE8. Yes, it's hard for me. I have to support IE8.
In any case, my code is able to translate the input element to the appropriate place in the template. However, I do not know why this error appears in IE8 and on which line. Error
TypeError: Object doesn't support this property or method<div ng-transclude>
Here is my code, since this is just a demo that I am preparing right now, I used the built-in styles and scripts.
<!DOCTYPE html>
<html ng-app="myApp" id="ng-app">
<head>
<title>All in One Validation Directive</title>
<script type="text/javascript" src="scripts/angular.js"></script>
<link type="text/css" rel="stylesheet" href="styles/bootstrap.css"/>
<script type="text/ng-template" id="validationContent">
<div ng-transclude></div>
<p class="bg-danger">{{errorMessage}}</p>
</script>
<script type="text/javascript">
var app=angular.module('myApp', []);
app.controller('DefaultController', function($scope){
$scope.user={};
});
app.directive('validationDirective', function(){
return {
restrict: 'A',
template: '<div ng-transclude></div>',
transclude: true,
link: function(scope, element, attrs){
}
};
});
</script>
</head>
<body ng-controller="DefaultController">
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h4>All in One Validation Directive</h4>
</div>
<div class="panel-body">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-3">Enter Your Name</label>
<div class="col-xs-3" data-validation-directive>
<input type="text" class="form-control" ng-model="user.name">
</div>
</div>
</div>
</div>
User Name is here :{{user.name}}
</div>
</div>
</body>
</html>
, . , .
, - divison, . , , . ? ? ? , , ? ?