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>'
    };
}]);

由于指令创建了自己的范围，因此可以使用原型链来提升一个级别。

不要只使用'user'对象，而是添加一个点。

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

您的运行功能会推断用户变量

考虑代码的以下部分：

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>'
      };
  }]);

在指令中使用Angular值服务？

4 个答案: