2017-01-17 4 views
0

角度からかなり新しく、スクリプトから計算された値を表示のための角度モデルにバインドして遊んでいます。何らかの理由で表示できません。スクリプトから角度値への問題のバインディング値

<!DOCTYPE html> 
<html> 
    <head> 
     <base href="." /> 
     <title>modern Angular 1 playground</title> 
     <link rel="stylesheet" href="style.css" /> 
     <script src="https://unpkg.com/[email protected]/dist/system.js"></script> 
     <script src="config.js"></script> 
     <script> 
     System.import('app') 
      .catch(console.error.bind(console)); 
     </script> 
    </head> 
    <body> 
     <my-app> 
     loading... 
     </my-app> 
     <script> 
     $scope.localDate = function() { 
      var currentTime = new Date(); 
      var year = currentTime.getFullYear(); 
      var month = currentTime.getMonth(); 
      var day = currentTime.getDate(); 
      var date = new Date(Date.UTC(year, month, day)); 
      var localDate = date.toLocaleDateString();  
      return $scope.localDate; 
     } 

     console.log(localDate); 
     </script> 
     <p ng-model="localDate.localDate">Date = {{localDate}}</p> 
    </body> 
</html> 

plnkrリンク

http://plnkr.co/edit/DOAbtwhIpLxzAJOoCxID

答えて

1

ことがアンギュラアプリケーションのルートであるため、あなたは<my-app>の外で$範囲にアクセスすることはできません。あなたは何ができるか

はあなたのグローバル関数から$scopeへの参照を削除しAppComponentでその関数を呼び出すことです:

localDate = function() { 

    var currentTime = new Date(); 
    var year = currentTime.getFullYear(); 
    var month = currentTime.getMonth(); 
    var day = currentTime.getDate(); 

    var date = new Date(Date.UTC(year, month, day)); 
    var localDate = date.toLocaleDateString(); 

    return localDate; 
} 

export const AppComponent = { 
    template: ` 
    <div> 
     <h2>Hello {{ $ctrl.name }}</h2> 
     <p>Date = {{ $ctrl.localDate }}</p> 
    </div> 
    `, 
    controller: class AppComponent { 
    $onInit() { 
     this.name = 'modern Angular 1' 
     this.localDate = localDate(); 
    } 
    } 
}; 

例:http://plnkr.co/edit/qTsTbpgEyco4shiKwRSx

関連する問題