2017-01-17 74 views
0

Angular相當新穎,並且將從腳本計算出的值綁定到角度模型以供顯示,因此某些原因我無法展示它。從腳本到角度值的問題綁定值

<!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