如何服務變量的變化更新控制器

我有一個小問題，我不明白這一點：當我將項目添加到TestiFactorys ARR如何服務變量的變化更新控制器

- 陣列它更新到兩個控制器
另一方面，爲什麼TestiFactorys arr_len沒有更新到兩個控制器。而在TestiController爲什麼我必須爲「手動」更新TestControllers list1_length，使其更新到看法，但我沒有更新TestiContollers LIST1，使其更新查看

我假設我可憐的Javascript或Javascript變量範圍的理解是造成這一點，但我只是沒有看到它。

我使用AngularJS版本1.2.16

<!DOCTYPE html> 
<html ng-app="TestiApp"> 
<head> 
    <title></title> 

</head> 
<body> 
<div ng-controller="TestController"> 
    List items from controller: {{list1}}<br> 
    List item count:{{list1_length}} 
    <input type="text" ng-model="param"><br> 
    <button ng-click="list1_add(param)">asd</button> 
</div> 
<br><br> 
<div ng-controller="TestController2"> 
    List items from controller2{{list2}} <br> 
    List items count in from controller2: {{list2_length}} 
</div> 

<script src="scripts/angular.min.js"></script> 
<script src="scripts/app.js"></script> 
</body> 
</html>

這是我app.js：

var TestiApp = angular.module('TestiApp', []) 

TestiApp.factory('TestiFactory',function() { 
     var arr = ['abx','cbs']; 
     var arr_len = arr.length; 

     return { 
      list : function() { 
       return arr; 
      }, 
      add_to_arr : function(n) { 
       arr.push(n); 
      }, 
      arr_len : function() { 
       arr_len = arr.length; 
       return arr_len; 
      } 
     } 
    } 
); 

TestiApp.controller('TestController', function($scope, TestiFactory) { 
    $scope.list1 = TestiFactory.list(); 
    $scope.list1_length = TestiFactory.arr_len(); 
    $scope.list1_add = function (d) { 
     TestiFactory.add_to_arr(d); 
     $scope.param = ''; 
     $scope.list1_length = TestiFactory.arr_len(); 
    } 

}); 

TestiApp.controller('TestController2', function($scope, TestiFactory) { 
    $scope.list2 = TestiFactory.list(); 
    $scope.list2_length = TestiFactory.arr_len(); 

});

編輯與解決方案

這裏是工作的解決方案。根據評論，我決定做更多的Javascripts基礎知識，其中
當然是我在嘗試使用這個使用Javascript的複雜框架之前應該做的事情。所以現在我對如何在Javascript中使用引用以及基本數據類型有一些基本的瞭解。並且基於這裏的工作版本：

<!DOCTYPE html> 
<html ng-app="TestiApp"> 
<head> 
    <title></title> 

</head> 
<body> 
<div ng-controller="TestController"> 
    List items from controller: {{list1()}}<br> 
    List item count:{{list1_len()}} 
    <input type="text" ng-model="param"><br> 
    <button ng-click="list1_add(param)">asd</button> 
</div> 
<br><br> 
<div ng-controller="TestController2"> 
    List items from controller2{{list2()}} <br> 
    List items count in from controller2: {{list2_length()}} 
</div> 

<script src="scripts/angular.min.js"></script> 
<script src="scripts/app.js"></script> 
</body> 
</html>

和app.js：

var TestiApp = angular.module('TestiApp', []) 

TestiApp.factory('TestiFactory',function() { 
     var arr = ['abx','cbs']; 

     return { 
      list : function() { 
       return arr; 
      }, 
      add_to_arr : function(n) { 
       arr.push(n); 
      }, 
      arr_len : function() { 
       return arr.length; 
      } 
     } 
    } 
); 

TestiApp.controller('TestController', function($scope, TestiFactory) { 
    $scope.list1 = TestiFactory.list; 
    $scope.list1_add = TestiFactory.add_to_arr; 
    $scope.list1_len = TestiFactory.arr_len; 
}); 

TestiApp.controller('TestController2', function($scope, TestiFactory) { 
    $scope.list2 = TestiFactory.list; 
    $scope.list2_length = TestiFactory.arr_len; 
});

來源

2014-05-24 user1703059

我碰到過很多次。工廠和服務的角度不像示波器......他們使用參考。數組在控制器中更新的原因是因爲原始參考已更新。長度未更新，因爲號碼類型是原始的。

這應該工作：

TestiApp.controller('TestController', function($scope, TestiFactory) { 
    $scope.list1 = TestiFactory.list(); 
    $scope.$watch('list1', function(list1) { 
     $scope.list1_length = list1.length; 
    }); 
    $scope.list1_add = function (d) { 
     TestiFactory.add_to_arr(d); 
     $scope.param = ''; 
    }; 
}); 

TestiApp.controller('TestController2', function($scope, TestiFactory) { 
    $scope.list2 = TestiFactory.list(); 
    $scope.$watch('list2', function(list2) { 
     $scope.list2_length = list2.length; 
    }); 
});

來源

2014-05-24 20:21:00 theJoeBiz

我沒有得到這個工作還沒有但這個答案我得到了新的信息和方向在哪裏何去何從。所以引用它，我必須更多地瞭解這個東西，才能更好地理解它。謝謝！ – user1703059

如何服務變量的變化更新控制器

回答

相關問題