angularjs - 有什么方法可以使用 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语法。