Question

我认为每次点击更改价格按钮时，我都希望视图获得新更新的价格。我使用了一个存储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＆amp;的新值。这可以在不同的控制器之间共享。

为了让它在priceController内工作，您需要将整个价格对象设置为$scope.price，就像执行$scope.price = Products.price; price.value来处理{{price.value}}的更新一样。 HTML将具有<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;
  };  
})

<强>代码

let jsonData = Data()
do {
    let jsonObject = try JSONSerialization.jsonObject(with: jsonData, options:JSONSerialization.ReadingOptions(rawValue: 0))
    guard let dictionary = jsonObject as? Dictionary<String, Any> else {
        print("Not a Dictionary")
        // put in function
        return
    }
    print("JSON Dictionary! \(dictionary)")
}
catch let error as NSError {
    print("Found an error - \(error)")
}

Working Codepen

Answer 2

在服务中，您必须将对象退出此功能

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”函数

要注意更改服务的“价格”值，您可以使用$ watch这样的

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

Angular如何制作动态变量

2 个答案: