フォームを含むテンプレートを持つコンポーネントがあります。
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?
}
});
フォームの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 。
名前の構文だけでなく、コンポーネントのpostLinkライフサイクルフックも使用します。この関数は、テンプレートとコントローラーが接続されると呼び出されます。 https://docs.angularjs.org/guide/component を参照してください。