AngularJS $scope继承服务

Question

我的代码有问题。我无法在我的数据服务中传递也无法 console.log 继承的 $scope.user。由于我在另一种看起来相同的情况下也遇到了这个问题，我猜这是因为回调。

主控制器创建用户

 .controller('mainCtrl', function ($scope, dataService) {
    dataService.getUser(function (response) {
        $scope.user = response.data[0];
    })

数据服务

    .service('dataService', function ($http) {
    this.getUser = function (callback) {
        $http.get('mock/user.json')
            .then(callback)
    };

导航控制器（mainCtrl 的子级）：

    .controller('navCtrl', function ($scope, dataService) {
    //$scope.user = "test";
    console.log ($scope.user);
    dataService.getNavItems($scope.user,function (response) {
        $scope.navItems = response.data;
    });

如您所料，如果我手动设置 $scope.user 它就可以正常工作。

Answer 1

控制器 'mainCtrl' 和 'navCtrl' 似乎有不同的作用域。如果 'navCtrl' 的范围是 'mainCtrl' 的子范围，您可以使用 $scope.$parent.user

访问它

在解决承诺时触发日志记录$scope.$parent.$watch('user', fucntion(newVal){console.log(newVal)})

如果没有，我建议有某种上下文，您可以在其中存储不同控制器使用的数据。

即使在浏览器控制台中也可以使用 angular.element('[ng-controller="mainCtrl"]').scope() 来查找作用域

Answer 2

实例化 navCtrl 时，promise 尚未解决。您可以做的是 return 来自 $http.get 的承诺，而不是直接在回调中设置 scope.user。然后将对 getNavItems 的调用包装在 promise 中。

这是假设，navCtrl 是 MainCtrl 的子项

.service('dataService', function ($http) {
  this.getUser = function () {
    return $http.get('mock/user.json');
  }};

.controller('mainCtrl', function ($scope, dataService) {
    $scope.userPromise = dataService.getUser();
 })

.controller('navCtrl', function ($scope, dataService) {
  $scope.userPromise.then(function(response) {
   var user = response.data[0];
   dataService.getNavItems(user, function (response) {
       $scope.navItems = response.data;
   });
});

})

Answer 3

两个控制器的作用域不同，因此如果您在另一个控制器中定义它，则它不会在一个控制器中定义。如果你想让它同时工作，只需使用 dataService。

 .service('dataService', function ($http) {
    this.getUser = function () {
       $http.get('mock/user.json').then(function(data) {
          this.user = data;
       )}
};

然后在每个控制器中分别访问它，它将对两者都可用。

AngularJS $scope继承服务

AngularJS $scope inheritance service

javascript

inheritance

angularjs

angularjs-service