在AngularJS中，为什么不能通过简单函数访问$ scope变量？

Question

我的代码如下所示：

angular.module('xyz', [])
    .controller('listController', ['$scope', 
        function($scope) {
            $scope.deliveryOptions = 0;
            var vm = this;

            function doTransaction() {
                console.log('delivery options is ' + vm.$scope.deliveryOptions);
            }
        }
    ]);

在console.log(delivery options)内部，它给我一个错误， it is Unable to get property 'deliveryOptions' of undefined or null reference 。 那么如何访问该变量？

Answer 1

问题是$ scope没有在vm对象上定义。 为了解决这个问题，您应该像这样在$ scope对象上定义所有内容

angular.module('xyz', [])
    .controller('listController', ['$scope', 
        function($scope) {
            $scope.deliveryOptions = 0;

            $scope.doTransaction = function() {
                console.log('delivery options is ' + $scope.deliveryOptions);
            }
        }
    ]);

还是在vm对象上

angular.module('xyz', [])
    .controller('listController', 
        function() {
            var vm = this;
            vm.deliveryOptions = 0;

            vm.doTransaction = function() {
                console.log('delivery options is ' + vm.deliveryOptions);
            }
        }
    );

混合vm和$ scope不是最好的方法

Answer 2

将$scope或controller as ，不能同时使用

主要问题是您将原始的AngularJS 1.x $scope用法与controller as使用vm （意为“视图模型”）的设计模式（从Angular 1.5开始）混合使用。

您需要选择一个，然后您的代码就可以正常工作。

如果将更清洁且错误率较低的vm和controller as设计模式，则只需使用vm而不是$ scope即可：

angular.module('xyz', [])
    .controller('listController', function() {
        var vm = this
        vm.deliveryOptions = 0
        vm.doTransaction = function() {
            console.log('delivery options is ' + vm.deliveryOptions)
        }
     })

然后在您的视图中，使用vm.doTransaction()调用函数并显示变量。