Javascript 在$http请求之后，链接函数中未定义数据

我有以下代码

controller.js

angular.module('LiveAPP.main',['LiveAPP.factory'])
.controller('mainCtrl', ['$scope','$http', '$location','dataFactory',mainCtrl])

.directive('ratehome',function(){
  return {
    restrict:"E",
    template: "<div id='rateYo'></div>",
    link: function(scope, ele, attrs){
      console.log("NEW",scope.recentArtist)
    }
  }
})


function mainCtrl($scope,$http,$location,dataFactory){

  $scope.getRecentArtists = function(){
     return $http({
        method: 'GET',
        url: '/artistsearch',
        params: {getArtist: "all"}
    }).then(function(recent){
      $scope.recentArtist = recent.data

    })
  };

  $scope.getRecentArtists();

  $scope.recentArtist = ""

  $scope.$watch('recentArtist',function(newValue,oldValue){
    $scope.recentArtist = newValue

  })

}    

angular.module（'LiveAPP.main'，['LiveAPP.factory']））
.controller（'mainCtrl'、['$scope'、'$http'、'$location'、'dataFactory'，mainCtrl]）
.指令（'ratehome'，函数（）{
返回{
限制：“E”，
模板：“”，
链接：功能（范围、元素、属性）{
console.log（“新建”，scope.recentArtist）
}
}
})
函数mainCtrl（$scope、$http、$location、dataFactory）{
$scope.getRecentArtists=函数（）{
返回$http({
方法：“GET”，
url:“/artistsearch”，
参数：{getArtist:“全部”}
}).然后（功能（最近）{
$scope.recentArtist=recent.data
})
};
$scope.getRecentArtists（）；
$scope.recentArtist=“”
$scope.$watch（'recentArtist'，函数（newValue，oldValue）{
$scope.recentArtist=newValue
})
}    

test.html

<ratehome></ratehome>
<ratehome></ratehome>
<ratehome></ratehome>

这里发生的事情是在实例化我的控制器（路由设置正确）时，有一个

$http

GET请求，该请求使用我需要的数据进行响应，该数据被分配给

$scope.recentArtist

。我希望这些数据可以在我的链接函数中访问，但事实并非如此。我感觉我的指令是在发送此请求之前编译的。这有什么办法吗？奇怪的是，当我

console.log（scope）

并签入Chrome开发者工具时，我的数据就在那里。然而，当I

console.log（scope.recentArtist）

为空时，它的状态与控制器中的状态类似。我想我可以在指令中使用

$http.get

，但这对我来说似乎有点尴尬

---

我已经有好几天遇到这个问题了，希望有人能帮我解决。

在$http响应返回之前，您的链接功能正在运行。您可以通过以下方式等待：

angular.module（'LiveAPP.main'，['LiveAPP.factory']））
.controller（'mainCtrl'、['$scope'、'$http'、'$location'、'$rootScope'、'dataFactory'，mainCtrl]）
.指令（'ratehome'，函数（）{
返回{
限制：“E”，
模板：“”，
链接：功能（范围、元素、属性）{
作用域：$on（'artistLoaded'，函数（）{
console.log（“新”，scope.recentArtist）；
});
}
};
});
函数mainCtrl（$scope、$http、$location、$rootScope、dataFactory）{
$scope.getRecentArtists=函数（）{
返回$http({
方法：“GET”，
url:“/artistsearch”，
参数：{getArtist:“全部”}
}).然后（功能（最近）{
$scope.recentArtist=recent.data
$rootScope.$broadcast（'artistload'）；
});
};
$scope.getRecentArtists（）；
$scope.recentArtist=“”；
$scope.$watch（'recentArtist'，函数（newValue，oldValue）{
$scope.recentArtist=newValue
});
}  

---

这样，在返回响应并设置之前，代码不会运行，因为您的指令未使用隔离的

作用域，这意味着您可以直接访问指令内的控制器作用域。我建议你把
$watch
放在指令
链接中，而不是你的控制器。这将告诉您ajax已经完成，数据已经更改&您将在
watcher
函数中获得这些更改的值

代码

.directive('ratehome',function(){
  return {
    restrict:"E",
    template: "<div id='rateYo'></div>",
    link: function(scope, ele, attrs){
      $scope.$watch('recentArtist',function(newValue,oldValue){
        console.log("NEW",newValue)
      });
    }
  }
})

指令（'ratehome'，函数（）{
返回{
限制：“E”，
模板：“”，
链接：功能（范围、元素、属性）{
$scope.$watch（'recentArtist'，函数（newValue，oldValue）{
console.log（“NEW”，newValue）
});
}
}
})
如果您使用的是
angular ui router
，您也可以使用
resolve
。使用
resolve
可以在控制器启动之前执行
$http

您可以使用“解析”为控制器提供状态自定义的内容或数据。resolve是一个可选的依赖关系映射，应该将其注入控制器

如果这些依赖项中有任何一个是承诺，那么在实例化控制器和
$stateChangeSuccessuccess事件被激发

从

请看下面的演示或这个


angular.module（'demoApp'，['ui.router']））
.config（函数（$urlRouterProvider，$stateProvider）{
$urlRouterProvider。否则（'/'）；
$stateProvider.state（'home'{
url:“/”，
模板：“”，
控制器：“mainCtrl”，
决心：{
艺人：职能（艺人服务）{
console.log（'Resolve'）；
返回artistsService.get（）；//'/artistsearch'，//artistsService.get（）；
}
}
});
})
.controller（'mainCtrl'，['$scope'，'$http'，'$location'，'artists'，mainCtrl]）
.指令（'ratehome'，函数（）{
返回{
限制：“E”，
模板：“
{{{artist}}
”，
链接：功能（范围、要素、属性）{
console.log（“新”，scope.recentArtist）；
}
}
})
.factory（'artistsService'，函数（$http）{
返回{
get:function（）{
console.log（'get'）；
返回$http({
方法：“GET”，
网址：'http://crossorigin.me/http://www.mocky.io/v2/558b30615f3dcbc414067170“，//”/artistsearch”，
//参数：{getArtist:“全部”}
}).然后（功能（最近）{
//console.log（最近）；
返回最近的数据；
});
}
};
});
函数MainCtrl（$scope、$http、$location、artists）{
$scope.recentArtist=艺术家；
console.log（'ctrl'，artists）；
}
这是一个相当主观的问题，但使用广播指令是否是一种良好的做法？我的印象是t
.directive('ratehome',function(){
  return {
    restrict:"E",
    template: "<div id='rateYo'></div>",
    link: function(scope, ele, attrs){
      $scope.$watch('recentArtist',function(newValue,oldValue){
        console.log("NEW",newValue)
      });
    }
  }
})