Question

在class中，我添加了一个 gem 对象来代表 gemStore 中的一个产品。如何将其分配给 StoreController 的产品属性。

app.js

Answer 1

你最好使用宝石工厂：

angular.module('gemStore', []).
factory('GemFactory', [ function() {
   var gem = { name: 'Azurite', price: 2.95 };
   return gem;
   };
 ]);

angular.module('gemStore',[]).controller("StoreController",function($scope, GemFactory){
      $scope.product = GemFactory();
  });

这样你就可以将依赖注入任何需要宝贵美丽宝石的控制器。再加上你将有一个宝石工厂，必将立即让你肮脏丰富。

Answer 2

将gem属性分配给范围对象。

(function(){
  var gem = { name: 'Azurite', price: 2.95 };
  var app = angular.module('gemStore', []);
  app.controller("StoreController",function($scope){
      $scope.product = gem;
  });
})();

然后，您将在StoreController的模板中输出'product'的属性。

<div>
    {{product.name}}
</div>
<div>
    {{product.price}}
</div>

您可以将宝石放入服务中，这样它就不会只是坐在封闭处。

(function(){

  var app = angular.module('gemStore', []);
  app.controller("StoreController",function($scope, GemSvc){
      $scope.product = GemSvc.getGem();
  });

  app.service("GemSvc",function(){
      var gem = { name: 'Azurite', price: 2.95 };

      this.getGem = function () {
          return gem;
      };
  });
})();

然后在你的模板中，我在这里使用了ng-controller方法，因为你没有说明你如何将模板连接到控制器。

<div ng-controller="StoreController">
    {{product.name}}
    {{product.price}}
</div>

Answer 3

你应该在controller scope：

上创建它

(function() {
  var app = angular.module('gemStore', []);

  app.controller("StoreController",function($scope) {
       $scope.gem = { name: 'Azurite', price: 2.95 };
  });
})();

现在可以在页面中显示：

<div>Name: {{gem.name}}, Price: {{gem.price}}</div>

Scope是一个引用应用程序模型的对象。它是一个表达式的执行上下文。范围按层次排列模仿应用程序的DOM结构的结构。范围可以观察表达和传播事件。 - Angular documentation

Answer 4

在app.js中创建一个常量服务您也可以将其置于真实服务中并访问它恒定服务示例
喜欢以下

(function(){
  var gem = { name: 'Azurite', price: 2.95 };
  var app = angular.module('gemStore', []).constant('GEM', {
    name: 'Azurite', 
    price: 2.95 
  });
  app.controller("StoreController",function($scope, GEM){
      $scope.product.name = GEM.name;
      $scope.product.price = GEM.price;
      //if you don't want to create a constant service then 
      //user directly like
      //$scope.product = gem;
  });
})();


<div>
    {{product.name}}
</div>
<div>
    {{product.price}}
</div>

Angular：在ng-controller中添加属性

4 个答案: