如何使用新的controllerAs語法和麪向對象的控制器獲得Angular中的雙向綁定？

Question

我害怕「範圍內的湯」，人們在功能範圍內掛着太多的功能。所以我正在嘗試面向OO的控制器，新的控制器，並在我的控制器中使用EC5風格的getter/setter。這工作很好，但現在我想用兩種方法將我的指令的作用域綁定到我的控制器的作用域，並且它不像我期望的那樣工作。我已經創建了這個codePen來展示它。

http://codepen.io/anon/pen/DlfxB?editors=101

我希望這條線的工作：

scope: { pants: '='}, 

Answer 1

如果你是在1.3 RC版，您可以使用bindToController選項，有2路的約束範圍變量可以在控制器上的約束。否則，你將不得不手動將屬性映射到控制器實例（這是一個痛苦），或者只是使用常規語法（沒有控制器）來進行2種綁定屬性。所以你可以在指令配置中使用和bindToController:true。

bindToController

• 當分離物範圍被用於組分（見上文），並且controllerAs被使用，bindToController將
• 允許組件有其屬性綁定到控制器，而不是範圍。當實例化控制器
• 時，隔離範圍綁定的初始值已經可用。

(function(){ 
 
    
 
    var myApp = angular.module('plunker', []); 
 

 
    var helloEC5 = function(){ 
 
     this.pants = "jeans"; 
 
    }; 
 
    helloEC5.prototype = { 
 
     firstName: 'Seeya', 
 
     lastName: 'Latir', 
 
     get fullName() { 
 
      return this.firstName + ' ' + this.lastName; 
 
     }, 
 
     set fullName (name) { 
 
      var words = name.toString().split(' '); 
 
      this.firstName = words[0] || ''; 
 
      this.lastName = words[1] || ''; 
 
     } 
 
    }; 
 
    myApp.controller('HelloEC5', helloEC5); 
 
    myApp.directive('myDirective', function() { 
 
     return { 
 
      scope: { pants: '='}, 
 
      controllerAs: 'my', 
 
      controller: function(){}, 
 
      bindToController:true, 
 
      template: '<h1>{{my.pants}} - myDirective.pants = {{ my.pants }}</h1><input ng-model="my.pants">' 
 
     } 
 
    }); 
 
})();

<script data-require="angular.js@1.3.0-rc.1" data-semver="1.3.0-rc.1" src="https://code.angularjs.org/1.3.0-rc.1/angular.js"></script> 
 

 
    <div ng-app="plunker"> 
 
    <div ng-controller="HelloEC5 as EC5"> 
 
     <p>HelloEC5 says my name is: {{EC5.fullName}} wearing {{EC5.pants}}!</p> 
 
     <label>Pants:</label> 
 
     <input ng-model="EC5.pants" type="text" /> 
 
     <label>FirstName:</label> 
 
     <input ng-model="EC5.firstName" type="text" /> 
 
     <div my-directive="" pants="EC5.pants"></div> 
 
     <hr /> 
 
     <label>Setting HelloEC5.fullName:</label> 
 
     <input ng-model="EC5.fullName" /> 
 
    </div> 
 
    </div>