Есть ли способ, используя 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> 

Если я пытаюсь написать нг-контроллер = "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 синтаксис.