javascript - 将一个属性从一个指令绑定(bind)到另一个指令

Question

我正在尝试在 Angular1 中使用 Angular2 中的“组件方法”，并且我的指令应该相互发送属性。我写了这样的代码:

父指令

angular
    .module('myModule')
    .controller('parentController', ParentController)
    .directive('parentDirective', () => {
        return {
            restrict: 'E',
            scope: {},
            controller: 'parentController',
            controllerAs: 'ctrl',
            templateUrl: 'parent-template.html'
        }
    });

class ParentController {
    constructor() {
        this._increasableValue = 0;

        setInterval(() => {
            this._increasableValue += 1;
        })
    }

    get increasableValue() { return this._increasableValue; }
}

父模板.html

<div class="container">
    <child-directive inc="{{ctrl.increasableValue}}"></child-directive>
</div>

子指令

angular
    .module('myModule')
    .controller('childController', ChildController)
    .directive('childDirective', () => {
        return {
            restrict: 'E',
            scope: {
                increasableValue: '@inc'
            },
            bindToController: true,
            controller: 'childController',
            controllerAs: 'ctrl',
            templateUrl: 'child-template.html'
        }
    });

class ChildController {
    set increasableValue(value) { this._increasableValue = value; }
    get increasableValue() { return this._increasableValue; }
}

子模板.html

<div class="container">
    <div>{{ctrl.increasableValue}}</div>
</div>

但是 increasableValue 卡住在起始值上并且根本不改变。应该如何从父指令获取increasableValue并将其绑定(bind)到子指令？

更新: 这是jsfiddle演示问题(也查看控制台)。

Answer 1

是的，你说得对!问题是如何更新变量。

Angular 不知道，该值发生了变化，并且不调用摘要循环来更新 View 。
示例为 $inteval service

angular.module('myModule', []);

var ParentController = (() => {
    function ParentController($interval) {
      this._increasableValue = 1;

      var interval = $interval(() => {
        this._increasableValue += 1;
        console.log(this._increasableValue);

        if (this._increasableValue > 20) {
          $interval.cancel(interval);
        }
      }, 1000);
    }

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

var ChildController = (() => {
		function ChildController() {}

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

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>`
        }
    });

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'])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div id="wrapper">
  <parent-directive>Loading...</parent-directive>
</div>

更新:或者您可以像这样简单地调用$digest函数

angular.module('myModule', []);

var ParentController = (() => {
    function ParentController($scope) {
      this._increasableValue = 1;

      var interval = setInterval(() => {
        this._increasableValue += 1;
        console.log(this._increasableValue);
        $scope.$digest();
        if (this._increasableValue > 5) {
          clearInterval(interval);
        }
      }, 1000);
    }

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

var ChildController = (() => {
		function ChildController() {}

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

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>`
        }
    });

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'])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div id="wrapper">
  <parent-directive>Loading...</parent-directive>
</div>