在指令中使用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>' 
     }; 
    }]);