Question

我遇到一个小问题，我不明白这件事：

当我向TestiFactorys arr - 数组添加项目时，它会更新到两个控制器
另一方面，为什么TestiFactorys arr_len不会更新到两个控制器。在TestiController中，为什么我必须手动＆＃34;更新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;
});

Answer 1

我遇到过很多次。角度中的工厂和服务与范围不同......它们使用引用工作。控制器中阵列更新的原因是原始引用已更新。长度未更新，因为数字类型是原始的。

这应该有效：

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;
    });
});

服务变量如何更改更新到控制器

1 个答案: