在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()調用函數並顯示變量。