聚合物和角度:尝试将数据从控制器传递到元素失败

Polymer and Angular: fail in trying to pass data from controller to the element

本文关键字：控制器 失败 元素 数据 聚合物      更新时间：2023-09-26

我的问题是下一个：

  1. 我有使用自定义聚合物元素的 AngularJS 应用程序;

  2. 例如，我有一个称为 Main 的控制器。它处理 /main 路由并使用自己的视图 - main.html;

  3. 主.html里面有我的元素;

  4. 我在控制器中初始化一个集合，并使用document.querySelector（'my-element'）.collection = $scope.collection将其传递给元素。当我直接打开/main URL 并加载页面时，它可以工作。但是当我直接打开另一条路由然后转到/main 时它不起作用 - 因为控制器在 my-element 工作的 ready（） 和 create（） 方法之后运行。

我在 my-element create（） 方法中使用 setInterval（） 有一个糟糕的解决方案。请帮助初学者。

提前感谢！

// my controller
app.controller('MyController', function($scope, collection) {
  
  $scope.collection = collection; // resolved from the route
  
});
// my element ready() method
...
ready() {
  
  
  // without timeout it will throw an exception, because JSON.parse parses {{list}} string itself on route state change.
  setTimeout(function() {
    
    this.list = JSON.parse(this.getAttribute('list'));
      
  }, 300);
  
}
<!-- MyController view -->
<my-element list={{collection}}></my-element>

可以使用 Polymer 数据绑定，如下所示： 

<polymer-element name="my-element" attributes="listJson">
  <template>
    ....
  </template>
  <script>
    Polymer({
      created: function() {
        this.list = [];
      },
      ready: function() {
        this.initList();
      },
      listJsonChanged: function() {
        this.initList();
      },
      initList: function() {
        this.list = JSON.parse(this.listStr);
      }
    })
  </script>
</polymer-element>

然后在视图中：

<my-element listJson="{{collection}}"></my-element>
相关文章：