web-dev-qa-db-ja.com

テンプレート内でフォームを取得するangularjsコンポーネント

フォームを含むテンプレートを持つコンポーネントがあります。

mycomponent.html：

<div>
    <form name="myForm"> 
        <!-- more html code -->
    </form>
</div>

コンポーネントコントローラー内のmyFormにアクセスするにはどうすればよいですか？現在、そこから取得するために$ scopeを注入しています。それとも、それがフォームを取得する唯一の方法ですか？

編集：javascriptでよりよく説明するためにいくつかのコードを追加しました

angular.module('example')
.component('myComponent', {

    templateUrl: 'mycomponent.html',
    controller: function($scope) {
         $scope.myForm // This works
         this.myForm // undefined, can I access it through the component scope instead of $scope somehow? 
    }
 });
angularjsangularjs-components
11
Luna

フォームのname属性は、angularがバインドする対象を決定するために使用するものです。したがって、controllerAs構文を使用している場合は、フォームでそれを使用する必要があります。名前：

  <body ng-controller="MainCtrl as vm">
    <form name='vm.myForm'>
    </form>
  </body>

これにより、$ scopeを使用せずに、コントローラーでそれを参照できるようになりますが、コントローラーが正常に作成された後でのみです。

app.controller('MainCtrl', function($scope, $timeout) {

    var vm = this;

    console.log(vm.myForm);  // undefined

    $timeout(function() {
        console.log(vm.myForm);  // FormController object
    }, 100);
});

これが機能しています plunk 。

23
Dave

名前の構文だけでなく、コンポーネントのpostLinkライフサイクルフックも使用します。この関数は、テンプレートとコントローラーが接続されると呼び出されます。 https://docs.angularjs.org/guide/component を参照してください。

1
royka