從指令模板中檢索ng模型的值到另一個Html文件

我無法從我的name directive中檢索到template-url的ng-model值。從指令模板中檢索ng模型的值到另一個Html文件

團隊two.html

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

在這裏，我有name-directive的form和pre標籤中查看我在input text of name-directive

名稱directive.js

鍵入值

(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不介意其他代碼因爲我認爲這與我的關注無關。

name.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"/>

在這裏

，我有一個ng-model，我要訪問的是firstname ..

編輯注：我發現，如果我添加$viewValue在<pre>{{userForm.firstname.$viewValue}}</pre>它的工作..我得到我想要的..但我認爲這不是我的問題的確切解決方案..

編輯2添加鏈接Plunker：https://plnkr.co/edit/6glStzEq5ckZZzph2qLw?p=preview

來源

2017-04-19 Marksmanship