表单对象可在视图中访问，但不能在控制器

Question

我有一个自定义指令，可以绘制如下形式：

app.directive('customForm', function() {   
  return {
    restrict: 'E',
    scope : {
        data : "="          
    } ,
    replace: true,
    controller: ['$scope', '$element', function($scope, $element) {
       ............ 
       ................
       $scope.submit=function(){
        if($scope.formName.$error) {
           return
        }
       }
      ........................
    }],
    ,templateUrl: function(element, attr) {
      return '/views/directives/custom-form.html';
    }

custom-form.html有一个名为formName的表单，我的问题是，当我访问表单对象时，html本身可以正常工作，但是在指令控制器中它是未定义

html：

<div>
   formName : {{formName}} 
   <!-- here the object is printed correctly with all of its properties ,
   and when i insert a wrong value it correctly becomes $invalid true -->
   <form novalidate name="formName" id="{{data.active.label}}-container">
  ..........
  ....................
  <button type="button" ng-click="submit()"> Submit</button>
</div>

检查控制器时

：

if($scope.formName.$error) {
    return 
}

遇到错误

  

无法读取未定义的$ error

到底发生了什么？它是如何在视图上绑定而不是在控制器上绑定的？