Question

我希望会有一个“Hello World！”在ctrl.hellos的输出中，但我一无所获。

<div ng-app="myApp">
    <div ng-controller="MyCtrl as ctrl" ng-bind="ctrl.hellos"></div>
</div>
<script>
    var myApp = angular.module('myApp', []);
    myApp.provider('helloWorld', function() {
        var _name = 'Default';

        this.$get = function($q) {
            return {
                sayHello: function() {
                    var deferred  = $q.defer()
                    setTimeout(function() {
                        if (_name !== 'Default') {
                            deferred.resolve('Hello, ' + _name + '!');
                        } else {
                            deferred.reject('No changes');
                        }
                    }, 3000);
                    return deferred.promise;
                }
            }
        };
        this.setName = function(newName) {
            _name = newName;
        }
    });


    myApp.config(function(helloWorldProvider){
        helloWorldProvider.setName('World');
    });

    myApp.controller('MyCtrl',['helloWorld',myCtrl]);

    function myCtrl(helloWorld) {
        helloWorld.sayHello().then(function(text){
            this.hellos = text
        },function(msg){
            this.hellos = msg
        })
    }
</script>

代码中有什么问题吗？谢谢

Answer 1

更改控制器功能

function myCtrl(helloWorld) {
   var ctrl = this
    helloWorld.sayHello().then(function(text){
        ctrl.hellos = text
    },function(msg){
        ctrl.hellos = msg
    })
}

并在你的HTML中

<h1>{{ctrl.hellos}}</h1>

Answer 2

您的问题在Promises/A+ spec。

中定义

主要在这里：

onFulfilled和onRejected必须作为函数调用（即没有此值）。

由于角度的承诺形式符合该标准，因此onFulfilled的上下文设置为window对象，类似于setTimeout / setInterval等。

你有几个选择。

别名this，.bind您的回调或使用将应用调用上下文的ES2015箭头函数。（与使用.bind）

类似的结果

    // alias
    var self = this;
    helloWorld.sayHello().then(function(text){
        self.hellos = text
    },function(msg){
        self.hellos = msg
    });

    // bind
    helloWorld.sayHello().then(function(text){
        this.hellos = text
    }.bind(this),function(msg){
        this.hellos = msg
    }.bind(this));

    // Arrow function
    helloWorld.sayHello().then((text) => {
        this.hellos = text
    },(msg) => {
        this.hellos = msg
    });

Arrow function example

关于使用ngBind

的仅供参考

通常，您不直接使用ngBind，而是使用类似{{expression}}的双卷曲标记，它类似但不那么详细。

来自Angular's docs

为什么在AngualrJS中使用controllerAs时没有输出

2 个答案: