即時通訊錯誤。 angular.js：13550 TypeError：無法讀取未定義的屬性'$ invalid'

Question

我試圖複製下面的代碼：http://blog.mgechev.com/2014/02/08/remote-desktop-vnc-client-with-angularjs-and-yeoman/但是出現錯誤（請參閱下面的錯誤）。

任何人都可以幫助我嗎？

這裏是我的js代碼：

'use strict'; 

angular.module('clientApp') 
    .controller('MainCtrl', 
    function ($scope, $location, VNCClient) { 

    $scope.host = {}; 
    $scope.host.proxyUrl = $location.protocol() + '://' + $location.host() + ':' + $location.port(); 

    $scope.login = function() { 
     var form = $scope['vnc-form']; 
     if (form.$invalid) { 
     form.$setDirty(); 
     } else { 
     VNCClient.connect($scope.host) 
     .then(function() { 
      $location.path('/vnc') 
     }, function() { 
      $scope.errorMessage = 'Connection timeout. Please, try again.'; 
     }); 
     } 
    }; 

    }); 

而且我的html代碼：

<div class="container"> 

    <div class="row" style="margin-top:20px"> 
     <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3" ng-controller="MainCtrl"> 
     <form role="form" name="vnc-form" novalidate class="css-form"> 
     <fieldset> 
      <h2>VNC Login</h2> 
      <hr class="colorgraph"> 
      <div class="form-error" ng-bind="errorMessage"></div> 
      <div class="form-group"> 
       <input type="text" name="hostname" id="hostname-input" class="form-control input-lg" placeholder="Hostname" ng-model="host.hostname" required ng-minlength="3"> 
      </div> 
      <div class="form-group"> 
       <input type="number" min="1" max="65535" name="port" id="port-input" class="form-control input-lg" placeholder="Port" ng-model="host.port" required> 
      </div> 
      <div class="form-group"> 
       <input type="password" name="password" id="password-input" class="form-control input-lg" placeholder="Password" ng-model="host.password"> 
      </div> 
      <div class="form-group"> 
       <a href="" class="btn btn-lg btn-primary btn-block" ng-click="login()">Login</a> 
      </div> 
      <hr class="colorgraph"> 
     </fieldset> 
     </form> 
    </div> 
    </div> 

</div> 

而且我得到這個錯誤：

angular.js:13550 TypeError: Cannot read property '$invalid' of undefined 
    at Scope.$scope.login (main.js:12) 
    at fn (eval at <anonymous> (angular.js:14432), <anonymous>:4:206) 
    at expensiveCheckFn (angular.js:15485) 
    at callback (angular.js:25018) 
    at Scope.$eval (angular.js:17229) 
    at Scope.$apply (angular.js:17329) 
    at HTMLAnchorElement.<anonymous> (angular.js:25023) 
    at HTMLAnchorElement.jQuery.event.dispatch (jquery.js:4737) 
    at HTMLAnchorElement.elemData.handle (jquery.js:4549) 

Answer 1

表單名稱不應該有「 - 「之間，如果你必須訪問角度控制器。只需重命名形式叫「vncForm」和你做

例：

<form role="form" name="vncForm" novalidate class="css-form"> 
</form> 

$scope.login = function() { 
          var form = $scope['vncFrom']; 
          if (form.$invalid) { 
          form.$setDirty(); 
          } 
          ... 
         };