Угловая: добавление собственности в нг-контроллере

Question

В app.js, я добавил драгоценный камень объекта для представления одного из продуктов в нашем gemStore. Как я могу присвоить его property 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.

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

Затем в шаблоне, я использовал метод нг-контроллера здесь, как вы не указать, как вы подключить ваши шаблоны к контроллерам.

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

Таким образом, вы можете просто заставлять его вводить в любой контроллер, который требует ваших драгоценных драгоценных камней. плюс у вас будет завод драгоценных камней, который обязательно сделает вас грязными богатыми в кратчайшие сроки.