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