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

mengda

我希望会有一个“ 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>

代码中有什么错误吗?

ste2425

您所遇到的问题在Promises / A +规范中定义

主要在这里:

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

由于promise的promise形式符合该标准,因此您onFulfilled已将window对象设置为上下文,类似于setTimeout/ setIntervaletc。

您有两种选择。

别名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
    });

箭头功能示例


仅供参考 ngBind

通常,您不会直接使用ngBind,而是会使用类似{{expression}}的双重卷曲标记,它虽然相似,但比较冗长。

Angular的文档

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么在C ++中使用字符串时没有输出?

为什么在为Chrome应用程序编码时无法在routeProvider中使用controllerAs语法?

当我在模板文字中使用.map时,为什么输出中会有逗号?

在使用random和threadpool时,为什么输出顺序没有改变?

为什么两次使用grep时都没有显示输出?

使用Flask渲染模板时,为什么我的html代码没有输出变量的值?

为什么没有输出?

为什么在bash中输入#时没有输出

当我在JFrame中使用FlowLayout时,为什么我的图像没有出现?

当我在模型中使用withAnimation时,没有动画发生,为什么?

在cmd中使用“ set var = text”命令后,为什么没有带有'echo%var%'的字符串输出?

为什么当我尝试使用 python 在表中插入一些值时,输出没有?

当我尝试使用XSLT输出方法“ html”时,为什么我的SVG没有显示?

为什么我在 TS 中使用 & 运算符时没有得到我所有的属性?

为什么在 r 中使用 read.csv 时没有得到“使用列规范解析”?

为什么输出没有变化?

为什么我没有输出?

为什么zio的putStrLn没有输出

为什么没有浮动输出?

为什么没有文件输出?

为什么这个程序没有输出?

当我没有在printf语句中添加`\ n`时,为什么输出中会有`%`?

当我在Kotlin中使用原始parseList函数时,为什么没有得到正确的结果?

当我没有在我的函数中使用它时,为什么我们需要 func.TimerRequest?

当没有参数提供给测试时,为什么在bash中使用-f进行测试会返回true?

在for循环初始化中使用let时,为什么封闭范围中没有let变量?

在where子句中使用相关查询进行查询时,为什么结果集中没有相似的ID

在独立Tomcat上部署时,为什么没有提取我的RequestMapping?它可以在Eclipse WTP中使用

为什么在使用CSS时页面没有加载?