JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.angularjs.org/1.1.5/angular.js"></script>
<form ng-app="app" submit-form action = "" name="form" novalidate>
<input ng-model = "item.name" name="name" error-render required type = "text" />
<input ng-model = "item.tel" name="tel" error-render required type = "text" />
<input ng-model = "item.email" name="email" error-render required type = "text" />
<button>Send</button>
</form>
<script>
app=angular.module("app",[]);
app.directive("submitForm",function($rootScope){
return{
scope:{},
restrict: 'A',
controller:function($scope, $element){
$scope.submitted=false;
this.submit=function(){
$scope.submitted=true;
};
this.getSubmit=function(){
return $scope.submitted;
};
this.submitOn=function(){
return $rootScope.$broadcast("submitOn");
};
},
link: function(scope, element, attrs,ctrl){
element.find("button").on("click",function(){
scope.submitted=true;
ctrl.submitOn();
});
}
}
})
.directive('errorRender',function($rootScope){
return{
restrict: 'A',
//scope: {},
//transclude:false,
require:['ngModel','^submitForm'],
controller: function($scope, $element){
//this.requireErrorEnable=function(){
$scope.$broadcast("requireErrorEnable");
//};
$scope.$broadcast("requireErrorDisable");
$scope.$broadcast("maxlengthErrorEnable");
$scope.$broadcast("maxlengthErrorDisable");
},
compile: function compile(tElement, tAttrs) {
return function postLink(scope, element, attrs, ctrl) {
modelCtrl=ctrl[0];
formCtrl=ctrl[1];
scope.$on("submitOn",function(){
alert("submitOn!!!");
});
var requireErrorEnable=function(){
element.attr("placeholder","error");
};
var requireErrorDisable=function(){
element.attr("placeholder","");
};
scope.$watch(function(scope){
return...
CSS
input,button{
display:block;
}