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

问题是vm对象上没有定义$ scope。要解决这个问题，您应该在$ 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()来调用您的函数并显示您的变量。

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

2 个答案: