无法访问手风琴内的表格

Question

这是我的代码示例：

<html ng-app="helloApp">
<head>
    <title>HelloWorld</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
    <script src="js/ui-bootstrap-tpls-0.12.1.js"></script>
    <script src="js/example.js"></script>
</head>

<body>
    <div class="page-header">
        <h1>Hello World Sample Program</h1>
    </div>
    <div ng-controller="HelloCtrl">

            <form class="form-horizontal" role="form" name="TestForm">
                <div class="form-group">
                    <label class="col-md-2 control-label">Type Your Name</label>
                    <div class="col-md-4">
                        <input type="text" ng-model="name"  class="form-control" value="{{name}}" required/>
                        <span>Hello {{ name }}!</span>
                    </div>
                </div>
            </form>

    </div>

</body>

和JavaScript：

(function() {

    var helloApp = angular.module("helloApp", ['ui.bootstrap']);

    helloApp.controller("HelloCtrl", ['$scope',
        function($scope) {
            // $scope.name = "calvin hobbes";
            $scope.$watch('TestForm.$valid', function() {
                console.log("watching " + $scope.TestForm.$valid);
            });
        }]);
})();

这很好用。

我可以看到正在控制台上监视该表单，并且在我键入时它从 false 变为 true。

但是，我需要手风琴内部的表格，如下所示：

<div ng-controller="HelloCtrl">
        <accordion close-others="false" >
            <accordion-group is-open="true" is-disabled="false">
                <form class="form-horizontal" role="form" name="TestForm">
                    <div class="form-group">
                        <label class="col-md-2 control-label">Type Your Name</label>
                        <div class="col-md-4">
                            <input type="text" ng-model="name"  class="form-control" value="{{name}}" required/>
                            <span>Hello {{ name }}!</span>
                        </div>
                    </div>
                </form>
            </accordion-group>
        </accordion>
    </div>

表格不再被识别。

我收到以下错误。我该如何解决？

TypeError: Cannot read property '$valid' of undefined
at Object.fn (example.js:12)
at l.$digest (angular.min.js:124)
at l.$apply (angular.min.js:126)
at angular.min.js:17

Answer 1

accordion 和 accordion-group 创建新范围。

TestForm's 控制器将在这些范围内更新，但不会在控制器的范围内更新。

要访问控制器范围内的 TestForm，请更改以下代码。

标记

<form class="form-horizontal" role="form" name="forms.TestForm">

控制器

  $scope.forms = {}
  $scope.$watch('forms.TestForm.$valid', function() {
        console.log("watching " + $scope.forms.TestForm.$valid); 
    });

这里是工作plnkr：http://plnkr.co/edit/IP6mMY6Jf0zzBoG9kMLx?p=preview

无法访问手风琴内的表格

cant access form inside an accordion

accordion

angularjs