![](/img/trans.png)
[英]Angular parse/evaluate/execute JS loaded into directive template by 3rd Party JS
[英]Extending a 3rd party angular directive and changing its template
我正在使用Daniel Crisps AngularJS Range Slider https://github.com/danielcrisp/angular-rangeslider ,想擴展他的指令並修改模板。
他的指令如下所示(縮短了空間):
angular.module('ui-rangeSlider', [])
.directive('rangeSlider', [
function () {
return {
restrict: 'A',
replace: true,
template: ['<div class="ngrs-range-slider">',
'<div class="ngrs-runner">',
'<div class="ngrs-handle ngrs-handle-min"><i></i></div>',
'<div class="ngrs-handle ngrs-handle-max"><i></i></div>',
'<div class="ngrs-join"></div>',
'</div>',
'<div class="ngrs-value-runner">',
'<div class="ngrs-value ngrs-value-min" ng-show="showValues"><div>{{filteredModelMin}}</div></div>',
'<div class="ngrs-value ngrs-value-max" ng-show="showValues"><div>{{filteredModelMax}}</div></div>',
'</div>',
'</div>'].join('')
}
}
]);
我一直在嘗試通過將我的指令命名為完全相同的名稱(例如,簡稱)來使用“ 擴展角度指令”這個問題中的建議:
angular.module('myDirective', [])
.directive('rangeSlider', [
function () {
return {
restrict: 'A',
priority: 500,
template: ['<div></div><div></div>'].join('')
}
}
]);
但是出現以下錯誤: 多個指令[rangeSlider,rangeSlider]要求使用以下模板:
之前有人遇到過這種情況嗎,我將如何在不修改原始模板的情況下更新原始模板?
編輯:在我的示例中有一個額外的')'。
我找到了一種方法,可讓您修改第三方模板而無需觸碰其代碼,並且在AngularJS中沒有任何錯誤。 這與您的嘗試有所不同,您無需在自己的模塊上定義具有相同名稱的指令,而應使用帶有$provide
module.config()
裝飾第三方模塊上的指令。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script>
// third-party code - cannot be modified
angular.module('ui-rangeSlider', []).directive('rangeSlider', [function() {
return {
restrict: 'A',
replace: true,
template: '<div>base</div>'
};
}]);
// this is your extension overriding the original template
angular.module('ui-rangeSlider').config(['$provide', function($provide) {
$provide.decorator('rangeSliderDirective', function($delegate) {
var dir = $delegate[0];
dir.template = ['<div>', dir.template, '<div>extended</div></div>'].join('');
return $delegate;
})
}]);
// this is your app
angular.module('sample', ['ui-rangeSlider']);
</script>
<body ng-app="sample">
<div range-slider></div>
</body>
您可以在https://jsfiddle.net/sjxwLe4k/4/上現場試用。
經過一堆stackoverflow搜索如何擴展AngularJS指令(最好在1.5。*版中)后,這對我有用。
從上面的示例中稍微修改裝飾器和$ delegate以使用Angular 1.5.8:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script>
angular.module('ui-rangeSlider', []).directive('rangeSlider', [function() {
return {
restrict: 'A',
replace: true,
template: ['<div>base</div>'].join('')
};
}]);
angular.module('myDirective', []).directive('rangeSlider', [function() {
return {
restrict: 'A',
priority: 500,
template: ['<div>extended</div>'].join('')
}
}]);
angular.module('sample', ['ui-rangeSlider', 'myDirective'])
.decorator('rangeSliderDirective', ['$delegate', function($delegate){
console.log($delegate);
$delegate.shift();
return $delegate;
}]);
</script>
<body ng-app="sample">
<div range-slider></div>
</body>
您可以在上面看到上面的代碼:
https://jsfiddle.net/sjxwLe4k/6/
看完你的例子。 我能夠毫無問題地運行它。 我將'myDirective'和'ui-rangeSlider'都添加到一個空應用程序中,我沒有任何問題。 我能夠從myDirective中刪除該模板,它顯示了ui-rangeSlider模板。
HTML:
<div range-slider></div>
完整的例子:
<!doctype html>
<html ng-app="sample">
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script>
angular.module('sample', ['ui-rangeSlider', 'myDirective']);
angular.module('ui-rangeSlider', [])
.directive('rangeSlider', [
function () {
return {
restrict: 'A',
replace: true,
template: ['<div class="ngrs-range-slider">',
'<div class="ngrs-runner">',
'<div class="ngrs-handle ngrs-handle-min"><i></i></div>',
'<div class="ngrs-handle ngrs-handle-max"><i></i></div>',
'<div class="ngrs-join"></div>',
'</div>',
'<div class="ngrs-value-runner">',
'<div class="ngrs-value ngrs-value-min" ng-show="showValues"><div>{{filteredModelMin}}</div></div>',
'<div class="ngrs-value ngrs-value-max" ng-show="showValues"><div>{{filteredModelMax}}</div></div>',
'</div>',
'</div>'].join('')
}
}
]);
angular.module('myDirective', [])
.directive('rangeSlider', [
function () {
return {
restrict: 'A',
priority: 500,
template: ['<div></div>test<div></div>'].join('')
}
}
]);
</script>
</head>
<body>
<div range-slider></div>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.