我正在研究 Angular 库并寻找一种使用装饰器模式扩展指令的方法:
angular.module('myApp', []).decorator('originaldirectiveDirective', [
'$delegate', function($delegate) {
var originalLinkFn;
originalLinkFn = $delegate[0].link;
return $delegate;
}
]);
使用此模式扩充原始指令的最佳方式是什么？ (示例用法:在不直接修改其代码的情况下对指令进行额外的监视或额外的事件监听器)。
最佳答案
您可以很容易地修改或扩展指令的 controller。如果它是 link 您正在寻找(如您的示例所示)，那么它并没有那么难。只需在config阶段修改指令的compile函数。
例如:
HTML 模板
<body>
<my-directive></my-directive>
</body>
JavaScript
angular.module('app', [])
.config(function($provide) {
$provide.decorator('myDirectiveDirective', function($delegate) {
var directive = $delegate[0];
directive.compile = function() {
return function(scope) {
directive.link.apply(this, arguments);
scope.$watch('value', function() {
console.log('value', scope.value);
});
};
};
return $delegate;
});
})
.directive('myDirective', function() {
return {
restrict: 'E',
link: function(scope) {
scope.value = 0;
},
template: '<input type="number" ng-model="value">'
};
});
现在您已经装饰了 myDirective 以在 value 更改时记录它。
相关插件在这里 https://plnkr.co/edit/mDYxKj
关于javascript - 如何使用 Angular 的装饰器模式来增强指令的链接功能？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38206180/