4

在依赖绑定值完成其初始化的子组件中进行初始化之前，我很难找到一种等待组件绑定在父范围内稳定的好方法。

这是我的小提琴：https ://jsfiddle.net/nLpd9bsq/2/

可能的解决方案：

1. 使用 $onChanges() 等待所有绑定稳定
在这个例子中，我们只有 1 个绑定，但假设我们有一个具有 3 个绑定的组件，并且每个值在父作用域中异步加载。尝试在子范围上同步初始化而不使用诸如承诺之类的东西会很麻烦。

2. 将“异步值”初始化移动到服务
将初始化移动到服务并使用承诺来解决它，然后将该服务注入大写和小写组件。通过这样做，除了我们将放弃组件绑定机制之外，我们还将失去对 appController 中初始化的控制，并且需要在 Service 中添加额外代码以防止两个组件发出相同的异步请求在它自己的初始化周期中并以重复的异步请求结束。

你觉得呢？你有没有什么想法？您会使用哪种解决方案？谢谢！

应用程序.js

angular.module('app', [ ]);
angular
    .module('app')
  .controller('appController',function($scope, $timeout){
    var $ctrl = this;
    $timeout(function(){
      $ctrl.value = 'Async value'
    }, 1000);        
  })
  .component('uppercase', {
    bindings : {
        stringVal : '<'
    },
    controller: function($scope){

        this.$onChanges = function(obj){

        /* Needed to wait initialization on the parent */
        if(obj.stringVal.currentValue){
            this.upperVal = this.stringVal.toUpperCase();    
         }
      };
    },
    template : '<div>Uppercase value: {{$ctrl.upperVal}}</div>'
  })
  .component('lowercase', {
    bindings : {
        stringVal : '<'
    },
    controller: function($scope){

        this.$onChanges = function(obj){
          /* Needed to wait initialization on the parent */
          if(obj.stringVal.currentValue){
            this.upperVal = this.stringVal.toLowerCase();    
          }
      };
    },
    template :'<div>Lowercase value: {{$ctrl.upperVal}}</div>'
  });

应用程序.html

<div ng-app="app" ng-controller="appController as $ctrl">
  <uppercase data-string-val="$ctrl.value"></uppercase>
  <lowercase data-string-val="$ctrl.value"></lowercase>
</div>
4

1 回答 1

2

我会将数据的初始化移至服务，并在数据可用或更新时发出事件。

您可以使用https://stackoverflow.com/a/36291681/217408来防止重复请求。

于 2016-05-10T06:54:43.107 回答