Angularjs 使用ng include插入表单时如何验证表单

我有3个不同的表单页面，它们使用ng include插入到引导模式窗口中的DOM中。在这样的场景中，在每个表单中进行验证并提交完整表单（所有3个表单）的最佳方法是什么

HTML

---

演示：

还需要找到验证数据的方法 （可以使用jqueryvalidation），但可以作为起点。 我认为没有办法得到游戏的价值 所以我想到了

var app = angular.module("myApp", [])
            app.controller("FormsCtrl", function($scope) {
               //console.log($scope);
               // $scope.items = ['Games', 'Music', 'Videos'];
                $scope.$on('someEvent',function(e,a){
                   console.log(a); 
                })
            });
            app.directive("myform", function() {
                return {
                    restrict: "A",
                    link:function(scope,element,attrs){
                        element.bind('submit',function(e){
                            var isValid = false; // TO DO :)
                            scope.$emit('someEvent', [attrs.fname,isValid]);
                        });
                    }
                }
            });



<div ng-controller="FormsCtrl"> 
      <div ng-switch on="page">
            <div ng-switch-when="Games">
                <div ng-include="'Games.html'"></div>
            </div>  
            <div ng-switch-when="Music">
                <div ng-include="'Music.html'"></div>
            </div>
            <div ng-switch-when="Videos">
                <div ng-include="'Videos.html'"></div>
            </div>
    </div>
</div>


<form name="games"  class="simple-form"  myform fname="games">
   <input type="text" ng-model="prefix.games.name" name="uName" required /><br>
</form>

var-app=angular.module（“myApp”，[]）
应用控制器（“FormsCtrl”，功能（$scope）{
//console.log（$scope）；
//$scope.items=[“游戏”、“音乐”、“视频”]；
$scope.$on（'someEvent'，函数（e，a）{
控制台日志（a）；
})
});
应用程序指令（“myform”，函数（）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
元素绑定（'submit'，函数（e）{
var isValid=false；//待办事项：）
作用域$emit（'someEvent'，[attrs.fname，isValid]）；
});
}
}
});

编辑 更聪明更快的方法：）

app.controller（“FormsCtrl”，函数（$scope）{
$scope.mySubmit=函数（isValid）{
console.log（isValid）；
}
});

您想使用唯一的表单还是需要在每个表单中进行验证？我的意思是，你必须验证游戏而不是音乐……我不认为你的问题清楚你想要实现什么。请考虑修改，我已经修改了说明书。单击“提交”时，我需要验证所有3个表单，如果可能，请更改左侧导航文本颜色（游戏、音乐…）以突出显示表单未填写/无效。@eddiec我已修改描述，这可以理解吗？@单击“提交”时，是否需要验证所有3个表单

var app = angular.module("myApp", [])
            app.controller("FormsCtrl", function($scope) {
               //console.log($scope);
               // $scope.items = ['Games', 'Music', 'Videos'];
                $scope.$on('someEvent',function(e,a){
                   console.log(a); 
                })
            });
            app.directive("myform", function() {
                return {
                    restrict: "A",
                    link:function(scope,element,attrs){
                        element.bind('submit',function(e){
                            var isValid = false; // TO DO :)
                            scope.$emit('someEvent', [attrs.fname,isValid]);
                        });
                    }
                }
            });



<div ng-controller="FormsCtrl"> 
      <div ng-switch on="page">
            <div ng-switch-when="Games">
                <div ng-include="'Games.html'"></div>
            </div>  
            <div ng-switch-when="Music">
                <div ng-include="'Music.html'"></div>
            </div>
            <div ng-switch-when="Videos">
                <div ng-include="'Videos.html'"></div>
            </div>
    </div>
</div>


<form name="games"  class="simple-form"  myform fname="games">
   <input type="text" ng-model="prefix.games.name" name="uName" required /><br>
</form>

app.controller("FormsCtrl", function($scope) {
                $scope.mySubmit = function(isValid){
                    console.log(isValid);
                }
            });


<form name="games"  class="simple-form" ng-submit="mySubmit(games.$valid)">
   <input type="text" ng-model="prefix.games.name" name="uName" required /><br>
</form>