Javascript 将属性从一个指令绑定到另一个指令

我试图在Angular1中使用Angular2的“组件方法”，我的指令应该互相发送属性。我编写了如下代码：

父指令

parent-template.html

child-template.html

{{ctrl.increasableValue}}

但是，

increasableValue

在开始值时冻结，并且根本不改变。如何从父指令中获取

递增值

，并将其绑定到子指令

UPD：

---

这里是为了演示问题（也看看控制台）。

看起来龙是在

setInterval

方法中。将其更改为带有

ng click

属性的按钮解决了我的问题。这里有更新

---

如果有人能解释问题的根源，我将不胜感激

看来龙是在

setInterval

接近。将其更改为带有

ng click

属性的按钮解决了我的问题。这里有更新

如果有人能解释问题的根源，我将不胜感激

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

不知道，该值已更改，并且不调用摘要循环来更新视图。
取样

angular.module（'myModule'，[]）；
var ParentController=（（）=>{
函数ParentController（$interval）{
这是._increasableValue=1；
变量间隔=$interval（（）=>{
这是.\u递增值+=1；
console.log（这是一个可增加的值）；
如果（此值可增加值>20）{
$interval.cancel（interval）；
}
}, 1000);
}
Object.defineProperty（ParentController.prototype，“increasableValue”{
get:function（）{returnthis.\u increasableValue；}，
可枚举：正确，
可配置：true
});
返回控制器；
})()
变量ChildController=（（）=>{
函数ChildController（）{}
Object.defineProperty（ChildController.prototype，“increasableValue”{
get:function（）{returnthis.\u increasableValue；}，
set:function（value）{this.\u increasableValue=value；}，
可枚举：正确，
可配置：true
});
返回控制器；
})();
有棱角的
.module（'myModule'）
.controller（'parentController'，parentController）
.directive（'parentDirective'，（）=>{
返回{
限制：'E'，
作用域：{}，
控制器：“父控制器”，
controllerAs:'ctrl'，
模板：`
`
}
});
有棱角的
.module（'myModule'）
.controller（'childController'，childController）
.directive（'childDirective'，（）=>{
返回{
限制：'E'，
范围：{
递增值：'=inc'
},
bindToController：对，
控制器：“childController”，
controllerAs:'ctrl'，
模板：`
{{ctrl.increasableValue}}
`
}
});
angular.bootstrap（document.getElementById（'wrapper'），['myModule']）

加载。。。

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

不知道，该值已更改，并且不调用摘要循环来更新视图。
取样

angular.module（'myModule'，[]）；
var ParentController=（（）=>{
函数ParentController（$interval）{
这是._increasableValue=1；
变量间隔=$interval（（）=>{
这是.\u递增值+=1；
console.log（这是一个可增加的值）；
如果（此值可增加值>20）{
$interval.cancel（interval）；
}
}, 1000);
}
Object.defineProperty（ParentController.prototype，“increasableValue”{
get:function（）{returnthis.\u increasableValue；}，
可枚举：正确，
可配置：true
});
返回控制器；
})()
变量ChildController=（（）=>{
函数ChildController（）{}
Object.defineProperty（ChildController.prototype，“increasableValue”{
get:function（）{returnthis.\u increasableValue；}，
set:function（value）{this.\u increasableValue=value；}，
可枚举：正确，
可配置：true
});
返回控制器；
})();
有棱角的
.module（'myModule'）
.controller（'parentController'，parentController）
.directive（'parentDirective'，（）=>{
返回{
限制：'E'，
作用域：{}，
控制器：“父控制器”，
controllerAs:'ctrl'，
模板：`
`
}
});
有棱角的
.module（'myModule'）
.controller（'childController'，childController）
.directive（'childDirective'，（）=>{
返回{
限制：'E'，
范围：{
递增值：'=inc'
},
bindToController：对，
控制器：“childController”，
controllerAs:'ctrl'，
模板：`
{{ctrl.increasableValue}}
`
}
});
angular.bootstrap（document.getElementById（'wrapper'），['myModule']）

加载。。。

使用

@inc

绑定指令。您应该使用双向的

=inc

方法-binding@devqon不幸的是，这没有帮助。我尝试过

=inc

，

@inc

甚至

&inc

，但都没有效果。在父指令中，如果使用的是angular>=1.3.x，请使用属性bindToController:true。也可以使用=代替@，

@

用于静态值，

=

用于双向绑定。@GonzaloPincheiraArancibia，它也不起作用。添加了一个示例，以演示您在指令中与

@inc

绑定的问题。您应该使用双向的

=inc

方法-binding@devqon不幸的是，这没有帮助。我尝试过

=inc

，

@inc

甚至

&inc

，但都没有效果。在父指令中，如果使用angu，请使用属性bindToController:true

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

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

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