在AngularJS指令中运行链接功能之前,请等待控制器中的数据

发布时间：2020-12-17 08:19:35 所属栏目：安全来源：网络整理

导读：在运行链接功能之前，如何确保控制器中的数据已加载到指令中？使用伪代码，我可以： my-map id="map-canvas" class="map-canvas"/my-map 为我的html 在我的指令中，我可能会这样做： app.directive('myMap',[function() {return{ restrict: 'AE',template:

在运行链接功能之前，如何确保控制器中的数据已加载到指令中？

使用伪代码，我可以：

<my-map id="map-canvas" class="map-canvas"></my-map>

为我的html

在我的指令中，我可能会这样做：

app.directive('myMap',[function() {



return{
    restrict: 'AE',template: '<div></div>',replace: true,controller: function ($scope,PathService) {

        $scope.paths = [];

        PathService.getPaths().then(function(data){
            $scope.paths = data;

        });

    },link: function(scope,element,attrs){
        console.log($scope.paths.length);

    }

}


}]);

以上将无法正常工作，因为console.log($ scope.paths.length);将在服务返回任何数据之前被调用。

我知道我可以从链接功能调用服务，但是想要知道在触发链接功能之前是否有方法“等待”服务调用。

最简单的解决方案是使用ng-if，因为只有当ng-if被解析为true时才会渲染元素和伪指令

<my-map id="map-canvas" class="map-canvas" ng-if="dataHasLoaded"></my-map>

app.controller('MyCtrl',function($scope,service){
  $scope.dataHasLoaded = false;

  service.loadData().then(
    function (data) {
      //doSomethingAmazing
      $scope.dataHasLoaded = true
    }
  )
})

或使用承诺

return {
  restrict: 'AE',PathService) {
    $scope.paths = [];
    $scope.servicePromise = PathService.getPaths()
  },link: function (scope,attrs) {
    scope.servicePromise.then(function (data) {
      scope.paths = data;
      console.log(scope.paths)
    });
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!