Is there any way, using ui-router, to bind variables from controller into the template without using $scope?

Question

My $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";
}

template Html:

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

If I try to write ng-controller="footerCtrl" into the DIV no data-binding and I get an error, whereas if I don't write it no errors and no data-binding.

Answer 1

Change your code to:

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",
            }
        }
    })

Use it like this:

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

Like this you have a real controllerAs syntax.