在指令中使用Angular value service？

Question

我有一个指令，需要显示存储在价值服务中的数据。它看起来是这样的：

angular.module('myApp', []) 
.value('user', {}) 
.run(['user', function (user) { 
    // "user" value is set by result of $http.get(), 
    // but hard-coding value for example purposes 
    user = { 
     name: 'Foo' 
    }; 
}]) 
.directive('userProfile', ['user', function (user) { 
    return { 
     restrict: 'E', 
     controller: function ($scope) { 
      $scope.user = user; 
     }, 
     template: '<span>User name: {{ user.name }}</span>' 
    }; 
}]); 

当指令的控制器获取注入user对象，但是，它的undefined。我错过了什么吗？

这里的活代码一起玩：http://jsfiddle.net/HB7LU/8433/

Answer 1

working sample

angular.module('myApp', []) 
.value('user', {}) 
.run(['user', function (user) { 
    // "user" value is set by result of $http.get(), 
    // but hard-coding value for example purposes 
    user.hardCoded = { 
     name: 'Foo' 
    }; 
}]) 
.directive('userProfile', ['user', function (user) { 
    return { 
     restrict: 'E', 
     controller: function ($scope) { 
      $scope.user = user.hardCoded; 
     }, 
     template: '<span>User name: {{ user.name }}</span>' 
    }; 
}]); 

由于指令创建自己的范围内，您可以通过使用原型链上一个水平。

不是只使用“用户”对象，而是添加一个点。

Answer 2

这里工作示例

http://jsfiddle.net/HB7LU/8460/

试试下面的代码

 angular.module('myApp', []) 
    .value('user', {name:'foo'}) 

    .directive('userProfile', ['user', function (user) { 
    return { 
    restrict: 'E', 
    controller: function ($scope) { 
     $scope.user = user; 
    }, 
    template: '<span>User name: {{ user.name }}</span>' 
}; 
}]); 

Answer 3

你运行功能deferences用户变量

考虑你的代码的以下部分：

angular.module('myApp', []) 
.run(['user', function (user) { 
    // "user" value is set by result of $http.get(), 
    // but hard-coding value for example purposes 
    user = { 
     name: 'Foo' 
    }; 
}]); 

而不是设置angular.value("user")的属性，而是重新引用用户参数以指向其他内容。 你应该这样做，而不是：

angular.module('myApp', []) 
.run(['user', function (user) { 
    // "user" value is set by result of $http.get(), 
    // but hard-coding value for example purposes 
    user.name = "Foo"; 
    // you are setting the properties of user 
}]); 

Answer 4

您可以在这种情况下使用angular.extend()，其中修改或从另一个对象的现有对象添加属性。这种方法的优点是您不必手动将每个属性分配给用户对象。

DEMO

的Javascript

angular.module('app', []) 

    .value('user', {}) 

    .run(function($http, user) { 
    $http.get('user.json').success(function(data) { 
     angular.extend(user, data); 
    }); 
    }) 

    .directive('userProfile', ['user', function (user) { 
     return { 
      restrict: 'E', 
      controller: function ($scope) { 
       $scope.user = user; 
      }, 
      template: '<span>User name: {{ user.name }}</span>' 
     }; 
    }]);