간단한 AngularJS 양식이 범위에서 정의되지 않았습니다.

간단한 AngularJS 양식이 범위에서 정의되지 않았습니다.

---

jsfiddle에서 AngularJS 양식을 가지고 놀기 시작했으며 매우 간단한 양식 예제가 예상대로 작동하지 않는 문제를 이미 발견했습니다. 내가 가진 것은 이름이 지정된 양식이며 어떤 이유로 범위에 표시되지 않습니다 (FormController 인스턴스가 필요합니다).

나는이 바이올린을 설정하고 아래의 기본 코드는 다음과 같습니다

HTML

<div id="mainContainer" ng-app="angularTest" ng-controller="MainCtrl">
    <h1>The Form</h1>
    <form name="theForm">
        <input name="myName" type="text" ng-model="model.name" />
        <input name="submit" type="submit" />
    </form>
</div>

JS

var app = angular.module('angularTest', []);

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.model = { name: 'Model Name' };
    console.log($scope.theForm); //displays 'undefined'
}]);

jsfiddle에서 이에 대한 간단한 예제를 많이 찾을 수 없으므로 이것이 이와 같은 사이트와의 이상한 상호 작용 일 수 있는지 확실하지 않았습니다 (내가 찾은 대부분의 예제는 공식 컨트롤러를 사용하지 않습니다). Plunker에서도 확인을 시도했지만 동일한 문제가 발생합니다.

나는 분명한 것을 놓치고 있다고 확신하지만 여기에서 변경하거나 조정할 다른 많은 것을 볼 수 없습니다. 어떤 도움이라도 대단히 감사합니다!

---

양식 은 컨트롤러가 처음 실행 된 후에 만$scope 컨트롤러에 등록됩니다 . 따라서 모든 것이 올바르게 설정 되더라도 undefined를 반환합니다.console.log($scope.theForm)

의 존재에 반응하는 예제에서 theForm감시자 theForm를 설정하여 존재에 따라 디버그 텍스트를 설정할 수 있습니다 .

$scope.$watch('theForm', function(theForm) {
    if(theForm) { 
        $scope.formDebugText = 'Form in Scope';
    }
    else {
        $scope.formDebugText = 'Form is Undefined';
    }        
});

http://jsfiddle.net/9k2Jk/1/ 에서 실제로 볼 수 있습니다.

---

watch를 사용하지 않고이 작업을 수행하는 좋은 방법 (약간 과잉 임)은 양식을 등록 할 범위에 개체를 정의하는 것입니다.

HTML

<div id="mainContainer" ng-app="angularTest" ng-controller="MainCtrl">
    <h1>The Form</h1>
    <form name="form.theForm">
        <input name="myName" type="text" ng-model="model.name" />
        <input type="button" value="Here the scope" ng-click="display()"/>
        <input name="submit" type="submit" />
    </form>
</div>

JS

var app = angular.module('angularTest', []);

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.model = { name: 'Model Name' };
    $scope.form = {};
    $scope.display = function () {
        console.log($scope.form.theForm);
    }
}]);

---

나를 위해 고친 것은 $scope.

컨트롤러에서 :

$scope.forms = {};
$scope.registerUser = function registerUser() {
    if ($scope.forms.userForm.$valid) {
        alert('submit');
    }
};

템플릿에서 :

<form name="forms.userForm" ng-submit="registerUser()">

이유:

<form name="userForm"...대신 사용 <form name="forms.userForm"...하면 양식이 자식 범위에 첨부되지만 $ scopes는 프로토 타입 상속을 사용하기 때문에 원래 $ scope에서 빈 개체 리터럴을 선언하자마자 양식이 대신 첨부되었습니다.

---

다음은 양식 변수에 액세스하는 데 권장되는 방법입니다. https://docs.angularjs.org/guide/forms- 양식 및 제어 상태에 바인딩

HTML에서 :

<form name="form">  
<input type="button" ng-click="reset(form)" value="Reset" />
</form>

Youl은 양식의 이름을 함수에 변수로 전달합니다.

JS에서 :

$scope.reset = function(form) { 
  alert(form); 
};

변수 'form'은 지금 정의되지 않아야합니다.

---

제 경우 ng-include에는 하위 범위를 생성하는 데 사용 되었으므로 현재 범위 내에서 속성은 undefined안전하고 하위 범위 문제를 방지하기 위해 역방향 변수를 사용하여 form.theForm.

But make sure that you've declared this form name in your controller in advance.

<form name="form.theForm">
    <input name="myName" type="text" ng-model="model.name" />
    <input name="submit" type="submit" />
</form>

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.model = { name: 'Model Name' };
    //You have to declare here, else it will trigger undefined error still.
    $scope.form = {
      theForm: {} 
    };

    $scope.reset = function(){
       $scope.form.theForm.$setPristine();
    }
}]);

---

You can re-initialize the form from your controller before you try to access $scope.form with this line of code. $scope.form will then be available.

angular.element(jQuery('.form-control')).triggerHandler('input')

---

I wrote a directive to deal with this issue. Its an attribute that you can put on your form and pass a function to which will execute when the form is ready.

Javascript

angular.module('app').directive('formInit', function(){
  return {
    restrict: 'A',
    scope: {
      init: '&formInit'
    },
    controller: function($scope, $element){
      var name = null;
      if ($element[0] && $element[0].name){
        name = $element[0].name;
      }

      var listener = $scope.$watch('init', function(){
        if ($scope[name] && $scope.init){
          $scope.init();
          listener();
        }
      });
    }
  };
});

Example HTML

<form name="test" form-init="testing()">

Where testing is a function on your controllers scope.

참고URL : https://stackoverflow.com/questions/22436501/simple-angularjs-form-is-undefined-in-scope