这是我的代码示例:
<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。
但是，我需要 Accordion 内的表格，如下所示:
<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
最佳答案
accordion 和 accordion-group 创建新范围。
TestForm's Controller 将在这些范围内更新，但不在 Controller 范围内。
要访问 Controller 范围内的 TestForm，请进行以下代码更改。
标记
<form class="form-horizontal" role="form" name="forms.TestForm">
Controller
$scope.forms = {}
$scope.$watch('forms.TestForm.$valid', function() {
console.log("watching " + $scope.forms.TestForm.$valid);
});
这里是工作 plnkr:http://plnkr.co/edit/IP6mMY6Jf0zzBoG9kMLx?p=preview
关于angularjs - 无法访问 Accordion 内的表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28995098/