AngularJs가 컨트롤러($scope)의 양식 개체에 액세스할 수 없습니다.

AngularJs가 컨트롤러($scope)의 양식 개체에 액세스할 수 없습니다.

보다 구체적으로 bootstrap-ui를 사용하고 있습니다.모달에 폼이 있는데 폼 검증 오브젝트를 인스턴스화 하고 싶습니다.기본적으로는 이렇게 하고 있습니다.

<form name="form">
    <div class="form-group">
        <label for="answer_rows">Answer rows:</label>
        <textarea name="answer_rows" ng-model="question.answer_rows"></textarea>
    </div>
</form>

<pre>
    {{form | json}}
</pre

html 파일에서는 폼 오브젝트를 문제없이 볼 수 있지만, 컨트롤러에서 폼 검증 오브젝트에 접속하고 싶은 경우.그냥 빈 물체를 출력할 뿐이죠다음으로 컨트롤러의 예를 나타냅니다.

.controller('EditQuestionCtrl', function ($scope, $modalInstance) {
    $scope.question = {};
    $scope.form = {};

    $scope.update = function () {
        console.log($scope.form); //empty object
        console.log($scope.question); // can see form input
    };
});

할 수 입니까?$scope.form★★★★★★★★★★★★?

★★★★★★★★★★★★★★★★를 하지 않는 으로 하고 있습니다.$scope, '''가 아니라this컨트롤러에서 폼 이름 앞에 컨트롤러 에일리어스를 추가해야 합니다.예를 들어 다음과 같습니다.

<div ng-controller="ClientsController as clients">
  <form name="clients.something">
  </form>
</div>

컨트롤러에서 다음을 수행합니다.

app.controller('ClientsController', function() {
  // setting $setPristine()
  this.something.$setPristine();
};

그것이 전체적인 답변에도 도움이 되기를 바랍니다.

ng-controller가 폼 요소의 부모일 경우 일반적인 방법: 다음 행을 삭제하십시오.

$scope.form = {};

angular로 하는 $scope을 사용하다

---

OP op op op op op op op op op op 。는 는는 he he he he를 쓰고 있다$modal.open컨트롤러는 폼의 부모가 아닙니다.나는 좋은 해결책을 모른다.을 사용하다

<form name="form" ng-init="setFormScope(this)">
...

컨트롤러에서 다음을 수행합니다.

$scope.setFormScope= function(scope){
   this.formScope = scope;
}

이후 업데이트 기능:

$scope.update = function () {
    console.log(this.formScope.form); 

};

angular ui 부트스트랩의 '모달' 소스 코드를 보면 지시어가

transclude: true

즉, 모달 창은 명령어 범위의 형제로서 컨트롤러 $scope를 부모로 하는 새로운 자 스코프를 만듭니다.그러면 새로 만든 하위 범위에서만 '양식'에 액세스할 수 있습니다.

하나의 솔루션은 다음과 같은 컨트롤러 범위에서 변수를 정의하는 것입니다.

$scope.forms = {};

그리고 폼명은 다음과 같은 것을 사용합니다.forms.formName1할 수 있습니다.이렇게 하면, 「」로 전화하는 할 수 .$scope.forms.formName1.

이것은 JS의 상속 메커니즘이 원형 체인이기 때문에 작동합니다.하려고 할 때forms.formName1먼저 폼 오브젝트를 자체 범위 내에서 찾으려 합니다.이 오브젝트는 즉석에서 작성되기 때문에 전혀 존재하지 않습니다. 부모되어 있기 '보다 낫다'(이렇게 하다)를 사용합니다.여기에서는 컨트롤러 범위에서 정의된 것을 사용하고 있습니다.'forms를 하기 위해 formName1그 결과 컨트롤러에서 다음과 같은 작업을 수행할 수 있습니다.

if($scope.forms.formName1.$valid){
      //if form is valid
}

트랜슬레이션에 대한 자세한 내용은 아래 Misco의 비디오를 45분 동안 보십시오.(이것은 내가 지금까지 발견한 것 중 가장 정확한 스코프일 것입니다!!!)

www.youtube.com/watch?v=WqmeI5fZcho

ng-init 트릭은 필요 없습니다.문제는 다음과 같습니다.$scope.form컨트롤러 코드 실행 시 설정되지 않습니다.를 삭제합니다.form = {}초기화하고 워치를 사용하여 폼에 액세스합니다.

$scope.$watch('form', function(form) {
  ...
});

나는 문서화된 접근법을 사용한다.

https://docs.angularjs.org/guide/forms

따라서 "저장"을 클릭할 때 폼 이름을 파라미터로 전달하고 저장 메서드에서 사용 가능한 hey presto 폼을 전달합니다(여기서 formScopeObject는 폼에서 설정한ng-models 사양에 따라 greate됩니다.또한 편집 중인 아이템을 저장하는 오브젝트입니다.즉, 사용자 계정).

<form name="formExample" novalidate>

<!-- some form stuff here -->
Name
<input type="text" name="aField" ng-model="aField" required="" />

<br /><br />

<input type="button" ng-click="Save(formExample,formScopeObject)" />

</form>

사용자 1338062에 의한 답변을 확대하려면: 컨트롤러에서 무언가를 초기화하기 위해 여러 번 사용했지만 실제로 사용할 수 있을 때까지 기다려야 하는 솔루션:

var myVarWatch = $scope.$watch("myVar", function(){
    if(myVar){
        //do whatever init you need to
        myVarWatch();    //make sure you call this to remove the watch
    }
});

Angular 1.5를 사용하는 사용자의 경우, 저의 솔루션은 $postlink 스테이지에서 $watching 폼을 보는 것이었습니다.

$postLink() {
      this.$scope.$watch(() => this.$scope.form.$valid, () => {
      });
    }

언급URL : https://stackoverflow.com/questions/21574472/angularjs-cant-access-form-object-in-controller-scope