スタティック・ディレクティブ・テンプレートから分離されたスコープ・プロパティにアクセスするには、Angular？

Question

コントローラ：

app.controller('MainCtrl', ['$scope', function($scope) { 
    $scope.temp = { 
     'name': 'Test' 
    }; 
}]); 

は、テンプレート：

<custom-field ng-model="temp.name"> 
    <md-input-container class="addon-menu"> 
     <label>Name</label> 
     <input ng-model="ngModel" type="text" ng-focus="setLastFocusedElement($event)" /> 
    </md-input-container> 
</custom-field> 

指令：

app.directive('customField', function($timeout) { 
    return { 
     restrict: 'E', 
     scope: { 
      ngModel: '=' 
     }, 
     link: function($scope, $element, $attrs) { 
      console.log($scope.ngModel); // prints "test" 
     } 
    }; 
}); 

問題は、テンプレートがレンダリングされると、私はinputに添付値を見ることができないということである - それはです空ですが、内部はlinkの機能が正しく印刷されているため、動作することを期待しています。

Answer 1

テンプレート内のディレクティブスコープにコントローラの有効範囲としてアクセスしようとしています。代わりにディレクティブのテンプレート内でマークアップを移動します。

指令：

app.directive('customField', function($timeout) { 
return { 
    restrict: 'E', 
    scope: { 
     ngModel: '=' 
    }, 
    link: function($scope, $element, $attrs) { 
     console.log($scope.ngModel); // prints "test" 
    }, 
    template: '<md-input-container class="addon-menu"><label>Name</label><input ng-model="ngModel" type="text" ng-focus="setLastFocusedElement($event)" /></md-input-container>' 
}; 

テンプレート：

<custom-field ng-model="temp.name"></custom-field> 

あなたも良い方法ですディレクティブテンプレートとして別のHTMLファイルを使用することができます。

Answer 2

コントローラの値を確認しようとしていますか？

値が存在するかどうかを確認するには、$ parent。$ scopeを試してください。