Javascript 角度指令的值设置了两次

Javascript 角度指令的值设置了两次,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我正在编写一个Angular应用程序,它实现组件方法(a-la Angular2风格)。但我面临着一个奇怪的问题:当指令必须设置一次时,不知何故它被设置了两次。对于示例中的数字,它不会引起麻烦,但对于与对象的双向绑定,它会引起麻烦 有一个代码: 模块初始化 上级指令 index.html(部分) 加载。。。 为什么会发生这种情况?我可以做些什么来删除第二个呼叫 工作示例: angular.module('myModule', []); var ParentController = (

我正在编写一个Angular应用程序,它实现组件方法(a-la Angular2风格)。但我面临着一个奇怪的问题:当指令必须设置一次时,不知何故它被设置了两次。对于示例中的数字,它不会引起麻烦,但对于与对象的双向绑定,它会引起麻烦

有一个代码:

模块初始化

上级指令

index.html(部分)


加载。。。
为什么会发生这种情况?我可以做些什么来删除第二个呼叫

工作示例:

angular.module('myModule', []);
var ParentController = (() => {
  function ParentController() {
    this._increasableValue = 1;
  }

  ParentController.prototype.update = function() {
    this._increasableValue += 1;
  }

  Object.defineProperty(ParentController.prototype, "increasableValue", {
    get: function() {
      return this._increasableValue;
    },
    enumerable: true,
    configurable: true
  });

  return ParentController;
})()

angular
  .module('myModule')
  .controller('parentController', ParentController)
  .directive('parentDirective', () => {
    return {
      restrict: 'E',
      scope: {},
      controller: 'parentController',
      controllerAs: 'ctrl',
      template: `
<div class="container">
        <child-directive inc="{{ctrl.increasableValue}}"></child-directive>
</div>
<button ng-click="ctrl.update()">Update</button>`
    }
  });
var ChildController = (() => {
  function ChildController() {}

  Object.defineProperty(ChildController.prototype, "increasableValue", {
    get: function() {
      return this._increasableValue;
    },
    set: function(value) {
      this._increasableValue = value;
      console.log(this._increasableValue); // prints twice
    },
    enumerable: true,
    configurable: true
  });

  return ChildController;
})();

angular
  .module('myModule')
  .controller('childController', ChildController)
  .directive('childDirective', () => {
    return {
      restrict: 'E',
      scope: {
        increasableValue: '@inc'
      },
      bindToController: true,
      controller: 'childController',
      controllerAs: 'ctrl',
      template: `
<div class="container">
    <div>{{ctrl.increasableValue}}</div>
</div>`
    }
  });
angular.bootstrap(document.getElementById('wrapper'), ['myModule'])
<div id="wrapper">
  <parent-directive>Loading...</parent-directive>
</div>