Angular 如何制作动态变量

Question

我有一个观点，我希望每次单击“更改价格”按钮时视图都能获得最新更新的价格。我使用了一个存储 newPrice 的服务，该 newPrice 从 priceModel 中获取他的值。到目前为止，当我按下按钮时，我无法在 DOM 中更新价格。

这是我的html

    <body ng-app="my-app">
  <div ng-controller="my-controller">
    <h1>Products</h1>
    <input type="text" ng-model="priceModel" />
    <br/>
    <button type="button" ng-click="changePrice()">Change Price</button>
  </div>
  <div ng-controller='priceController'>
    Price {{price}}
  </div>

</body>

这是我的javascript

    var app = angular.module('my-app', [])

.controller("my-controller", function($scope, Products) {

  var newPrice = '';

  $scope.changePrice = function(){
    newPrice = $scope.priceModel;
    Products.price(newPrice);
  }

})

.controller('priceController', function(Products, $scope){
  $scope.price = Products.price();
})

.service('Products', function(){

  this.price = function(newPrice){
    return newPrice;
  };

})

MY CODEPEN

Answer 1

您可以在服务中维护一个对象，以便您可以遵循 点规则（JavaScript 继承）来更新对象值。

在服务中创建和定价对象，并且会有一个 setter 方法来设置 price.value 的新值并且可以在不同的控制器之间共享。

为了使其在 priceController 内工作，您需要将整个价格对象设置为 $scope.price，就像通过执行 $scope.price = Products.price; 来处理 price.value 的更新一样]. HTML 将有 {{price.value}}

标记

<body ng-app="my-app">
  <div ng-controller="my-controller">
    <h1>Products</h1>
    <input type="text" ng-model="price" />
    <br/>
    <button type="button" ng-click="changePrice(price)">Change Price</button>
  </div>
  <div ng-controller='priceController'>
    Price {{price.value}}
  </div>
</body>

代码

var app = angular.module('my-app', [])

.controller("my-controller", function($scope, Products) {

  $scope.price = Products.price.value;
  $scope.changePrice = function(newPrice){
    Products.setPrice(newPrice);
  };
})
.controller('priceController', function(Products, $scope){
  $scope.price = Products.price;
})
.service('Products', function(){
  var Products = this;
  Products.price = {
    value: ''
  };
  this.setPrice = function(newPrice){
    Products.price.value = newPrice;
  };  
})

Working Codepen

Answer 2

在服务中，你必须return反对这样的功能

app.module('my-app').service('Products', function(){
  var price = 0;
  return {
    setPrice: function(price){
      price = price;
    },
    getPrice: function(){
      return price;
    }
  }
});

然后在控制器中的 $scope.changePrice 函数中

$scope.changePrice = function(){
  Product.setPrice($scope.priceModel);
}

当用户按下按钮时，将调用此函数并将 "priceModel" 传递给产品服务中的函数 "setPrice"

要观察 "price" 服务价值的变化，您可以像这样使用 $watch

$scope.$watch(function(){ return Product.getPrice() }, function(newVal, oldVal){
  if(newVal){
    $scope.price = newVal;
  }
});

Angular 如何制作动态变量

Angular how to make a dynamic variable

html

javascript

angularjs

angularjs-service

angularjs-controller