角：以ng控制器添​​加属性

Question

在app.js，我已经添加了一个宝石对象，以表示我们的gemStore的产品之一。我如何将它分配给产品属性StoreController。

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

    }); 
})(); 

Answer 1

将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 2

你也许应该在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> 

范围是指一个物体应用模型。它是一个表达式的执行上下文 。范围按分层结构排列，模仿应用程序的DOM结构。范围可以 监视表达式并传播事件。 - Angular documentation

Answer 3

在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> 

Answer 4

您最好使用宝石工厂：

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(); 
    }); 

这种方式，你可以依赖注入到任何需要你宝贵的美丽宝石的控制器。再加上你会有一个宝石工厂，它必将使你立刻变得肮脏。