如何服务变量的变化更新控制器

我有一个小问题，我不明白这一点：当我将项目添加到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

如何服务变量的变化更新控制器

回答

相关问题