ディレクティブテンプレートから別のHtmlファイルにng-modelの値を取得する

Question

ng-modelの値がtemplate-urlのname directiveから取得できません。

チームtwo.htmlここ

<form name="userForm" novalidate> 
    <div name-directive></div> 
</form> 
<pre>{{userForm.firstname}}</pre> 

私はinput text of name-directive

名-directive.js

に値を入力すると、表示する formと preタグ内 name-directiveを持っています

(function() { 
'use strict'; 

var app = angular.module('app.input-form'); 

app.directive('nameDirective', function() { 
return { 
    restrict: 'AE', 
    scope: true, 
    controller: function() { 
    var vm = this; 
    vm.namePattern = /^[a-zA-Z ]{1,25}$/; 
    }, 
    controllerAs: 'vm', 
    templateUrl: '/src/client/app/input-form/name.html' 
} 
}); 
})(); 

ここに、私はtemplateUrl私はそれが私の懸念に関連しないと思う他のコードを心配しないでください。ここで

名.html

<input type="text" name="firstname" class="form-control" placeholder="Enter 
your first name" 
    ng-model="firstname" 
    ng-minlength="2" 
    ng-maxlength="20" 
    required 
    ng-pattern="vm.namePattern"/> 

、私はfirstnameあるアクセスしたいng-model ...

編集注意を持っている：私は、もし私が追加することを発見しました$viewValueで<pre>{{userForm.firstname.$viewValue}}</pre>それは動作します..私は私が欲しいものを得る。しかし、私はそれが私の問題の正確な解決策ではないと思う..

Plunkerへのリンクを追加しました

編集2：あなたはディレクティブでcontrollerAsを使用しているのでhttps://plnkr.co/edit/6glStzEq5ckZZzph2qLw?p=preview

Answer 1

は、HTMLからの変数にアクセスしているときに参照する必要があります。答えるため

ng-model="vm.firstname"

​​