Question

Angular相当新，并且将从脚本计算的值绑定到角度模型进行显示，出于某种原因我无法将其显示出来。

<!DOCTYPE html>
<html>
   <head>
      <base href="." />
      <title>modern Angular 1 playground</title>
      <link rel="stylesheet" href="style.css" />
      <script src="https://unpkg.com/systemjs@0.19.31/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

Answer 1

您将无法访问<my-app>之外的$ scope，因为这是Angular应用程序的根目录。

您可以做的是从全局函数中删除对$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

无法将脚本中的值绑定到角度值

1 个答案: