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

无法通过手风琴进入表格

1 个答案: