Angular 1.6 从服务中检索数据时不显示

Question

我正在尝试学习新的组件语法。如果我在控制器中静态设置一个用户变量，它就可以工作，我会在页面上看到数据。如果我尝试从服务中获取相同的数据，则数据不会显示。在将数据分配给 this.user 变量后，我在 then promise 中看到了数据。

我创建了一个 plunkr 来向您展示我正在尝试的东西。

http://plnkr.co/BGXesnKBmQGUlVH33jNa

angular.module('myWebApp', ['myModule']);

angular.module('myModule', []);

angular.
    module('myModule').
    component('myComponent', {
        controller: ['myService', function myController(mySvc) {
            mySvc.getUser().then(function (data) { // This gets data but does not populate view. Why?!
                this.user = {
                    name: 'Joe',
                    last: 'Shmoe'
                };

                console.log(user); // Populated with data from service
            });

            // Comment out above and uncoment this and it works!
            // this.user = {
            //     name: 'Joe',
            //     last: 'Shmoe'
            // };

        }],
        template: 'Hello, {{ $ctrl.user.name }}!',
    });

angular.
    module('myModule').
    factory('myService', ['$timeout', function ($timeout) {
        function getUser() {
            // Simulate http get
            return $timeout(function() {
                return {
                    name: 'Joe',
                    last: 'Shmoe'
                };
            }, 1000);
        }

        return {
            getUser: getUser
        };
    }]);

Answer 1

正如llp指出的那样，this.user指向函数的this，所以你需要做的是在函数外部和控制器内部的变量中定义this像这样 (plunker):

angular.module('myWebApp', ['myModule']);

angular.module('myModule', []);

angular.
    module('myModule').
    component('myComponent', {
        controller: ['myService', function myController(mySvc) {
          var me = this;
            mySvc.getUser().then(function (data) { // This gets data but does not populate view. Why?!
                me.user = {
                    name: 'Joe',
                    last: 'Shmoe'
                };

                console.log(me.user); // Populated with data from service
            });

            // Comment out above and uncoment this and it works!
            // this.user = {
            //     name: 'Joe',
            //     last: 'Shmoe'
            // };

        }],
        template: 'Hello, {{ $ctrl.user.name }}!',
    });

angular.
    module('myModule').
    factory('myService', ['$timeout', function ($timeout) {
        function getUser() {
            // Simulate http get
            return $timeout(function() {
                return {
                    name: 'Joe',
                    last: 'Shmoe'
                };
            }, 1000);
        }

        return {
            getUser: getUser
        };
    }]);

Answer 2

因为then中函数中的this变量与controller的this不一样，建议使用arrow function 这将保持 this 不变以解决此问题：

angular.module('myWebApp', ['myModule']);

angular.module('myModule', []);

angular.
module('myModule').
component('myComponent', {
    controller: ['myService', function myController(mySvc) {
        mySvc.getUser().then((data) => { // Changed here!
            this.user = {
                name: 'Joe',
                last: 'Shmoe'
            };

            console.log(this.user); // Populated with data from service
        });

        // Comment out above and uncoment this and it works!
        // this.user = {
        //     name: 'Joe',
        //     last: 'Shmoe'
        // };

    }],
    template: 'Hello, {{ $ctrl.user.name }}!',
});

angular.
module('myModule').
factory('myService', ['$timeout', function($timeout) {
    function getUser() {
        // Simulate http get
        return $timeout(function() {
            return {
                name: 'Joe',
                last: 'Shmoe'
            };
        }, 1000);
    }

    return {
        getUser: getUser
    };
}]);

updated plunker

Angular 1.6 从服务中检索数据时不显示

Angular 1.6 Data not displaying when retrieved from service

angularjs

angularjs-1.6