Question

我对角度很合理，我发现以下奇怪的问题发生了，我不确定为什么。我有一个简单的控制器，在范围上有2个属性 - ＆＃34;句子＆＃34;和＆＃34; countVal＆＃34;我在html页面的顶部显示。

我有一个工厂＆＃34; ModelState＆＃34;保存我的服务＆＃34; UpdatingService＆＃34;填充。

我看到的奇怪问题是ModelState.values.push（data）;导致数组长度值变为1，但计数值不会增加。 TestCtrl中的$ watch也不会登录到控制台。我确定我做错了，但我无法弄清楚是什么。这是我的html（内联脚本）。非常感谢提前。

<!doctype>
<html ng-app="testApp">

<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.js"></script>
</head>

<body ng-controller="TestCtrl">

<p>Array length : {{ sentences.length }}</p>
<p>Count value  : {{ countVal }}</p>
<br>

</body>

<script>
var testApp = angular.module('testApp', []);

testApp.controller('TestCtrl', function($scope, ModelState, UpdatingService) {

  $scope.sentences = ModelState.values;
  $scope.countVal  = ModelState.countVal;

  $scope.$watch("countVal", function(newValue, oldValue){
    console.log(newValue,"  ",oldValue);
  }, true);
});

testApp.factory('ModelState', function(){
  return {
    values : [],
    countVal : 0
  };
});

testApp.service("UpdatingService", function($http, $timeout, ModelState, $q){
   var service = {

    getData:function(){
      var promise = $http.get("http://baconipsum.com/api/?type=meat-and-filler");

      promise.success(function(data){
        ModelState.values.push(data);
        ModelState.countVal++;
      });

      return promise;
    }
  };

  service.getData();

  return service;
});

</script>

</html>

Answer 1

当您在控制器内写字时：

$scope.sentences = ModelState.values;
$scope.countVal  = ModelState.countVal;

您将引用分配给sentences数组 - 从现在开始ModelState和$scope引用同一个Array <的实例/ p>

并且您将值分配给countVal属性 - 从现在开始ModelState和$scope指向 2个不同的实例Number

然后当您push新项目sentences时，其length更改会反映在视图中，但$scope.countVal没有更改，因为您只更改了{{ModelState.countVal的属性1}}。

解决此问题的一种方法是简单地分配$scope.ModelState = ModelState并直接在视图中使用其属性：

<p>Array length : {{ ModelState.sentences.length }}</p>
<p>Count value  : {{ ModelState.countVal }}</p>

另一种方法是使用范围方法来访问ModelState值，如下所示：

$scope.sentenecesLength = function(){
  return ModelState.sentences.length;
};
$scope.countVal = function(){
  return ModelState.countVal;
};

<p>Array length : {{ sentenecesLength() }}</p>
<p>Count value  : {{ countVal() }}</p>

$ watch on promise＆＃34;然后＆＃34;对于数组而不是值

1 个答案: