有什麼辦法，使用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-控制器= 「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語法。