Как получить двухстороннее связывание для работы в Angular с новым синтаксисом controllerAs и объектно-ориентированными контроллерами?

Question

Я боюсь "супа из области видимости", люди вешают слишком много функциональности за пределы области видимости. Поэтому я экспериментирую с ОО-ориентированными контроллерами, новыми контроллерами и использую геттер / сеттеры в стиле EC5 в своем контроллере. Это работает хорошо, но теперь я хочу связать область действия моей директивы с областью действия моего контроллера, и она не работает, как я ожидаю. Я создал этот codePen, чтобы показать его.

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

Я ожидаю, что эта строка будет работать:

scope: { pants: '='},

Answer 1

Ты можешь использовать bindToControllerопция, если вы в версии 1.3 rc, чтобы иметь 2-х сторонние переменные области видимости, которые будут привязаны к контроллеру. В противном случае вам нужно будет просто вручную сопоставить свойства с экземпляром контроллера (что является проблемой) или просто использовать обычный синтаксис (без контроллера.) Для двухсторонних связанных свойств. Так что вы могли бы сделать'<h1>{{my.pants}} - myDirective.pants = {{ my.pants }}</h1><input ng-model="my.pants">'с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>