有没有什么方法可以使用 ui-router，在不使用 $scope 的情况下将控制器中的变量绑定到模板中？

Question

我的$stateProvider：

$stateProvider
        .state('home', {
            url: "/home",
            views: {
                "header": {templateUrl: "templates/header.html"},
                "footer": {
                    templateUrl  : "templates/footer.html",
                    controllerAs : "footerCtrl",
                    controller   : function($scope){
                        footerCtrl($scope);
                    }
                }
            }
        })

function footerCtrl($scope){
    console.log($scope);
    $scope.var1 = "Fulvio";
    this.var2 = "Cosco";
}

模板Html:

<div>
    {{var1}}
    {{footerCtrl.var2}}
</div>

如果我尝试将 ng-controller="footerCtrl" 写入 DIV 无数据绑定并且我收到错误，而如果我不写入它则没有错误也没有数据-绑定。

Answer 1

将您的代码更改为：

function footerCtrl() {
    this.var1 = "Fulvio";
    this.var2 = "Cosco";
    console.log(this);
}

// Declare the controller
yourAngularModule.controller('footerCtrl', footerCtrl);

$stateProvider
    .state('home', {
        url: "/home",
        views: {
            "header": {templateUrl: "templates/header.html"},
            "footer": {
                templateUrl  : "templates/footer.html",
                controllerAs : "footer", // The controller alias
                controller   : "footerCtrl",
            }
        }
    })

这样使用：

// templates/footer.html
<div>
    {{footer.var1}}
    {{footer.var2}}
</div>

这样你就有了真正的 controllerAs 语法。