カスタムディレクティブの中から$ modelValueと$ viewValueにアクセスする方法は？

Question

カスタムディレクティブの中から$modelValueと$viewValueにアクセスしようとしているうちに、私はnullを取得しています。

var demo = angular.module('demo', []); 
 
demo.directive('dogInfo', function($parse) { 
 
    return { 
 
     restrict: 'E', 
 
     require: 'ngModel', 
 
     template: "<div> Dog's name: {{dogname}}<br>View Name: {{viewValue}}<br>Model Value: {{modelValue}}<br> Tag name: {{tagName}}</div>", 
 
     link: function (scope, element, attrs, controller) { 
 
      scope.viewValue = controller.$viewValue; 
 
      scope.modelValue = controller.$modelValue; 
 
      scope.tagName = controller.$name; 
 
     } 
 
    }}); 
 

 
function MyCtrl ($scope) { 
 
    $scope.dogname = 'Hero'; // now  
 
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> 
 
<div ng-app='demo'> 
 
    <p ng-controller='MyCtrl'> 
 
     <dog-info ng-model="dogname" name="Doggggyyy"/>. 
 
    </p> 
 
</div>

私はこの出力を取得しています：

Dog's name: Hero 
View Name: null 
Model Value: null 
Tag name: Doggggyyy 

ここでフィドルです：http://jsfiddle.net/cxdun3y8/3/

Answer 1

は、このアプローチを試してみてください：

demo.directive('dogInfo', function($parse) { 
    return { 
     restrict: 'E', 
     require: 'ngModel', 
     template: "<div> Dog's name: {{dogname}}<br>View Name: {{model.$viewValue}}<br>Model Value: {{modelValue}}<br> Tag name: {{tagName}}</div>", 
     link: function (scope, element, attrs, controller) { 
      scope.model = controller; 
      scope.viewValue = controller.$viewValue; 
      scope.modelValue = controller.$modelValue; 
      scope.tagName = controller.$name; 
     } 
    }}); 

ビューにデータを渡す方法に注意してください