基于属性动态更改Angular指令

Question

我想在特定属性发生变化时更改模板/ templateUrl。我目前有以下内容，它会正确加载初始图像，但在更新时不会更改。

.directive('parkingImage', ['$compile', function($compile) {
    return {
        restrict: 'E',
        scope: {
            image: '='
        },
        link: function(scope,element,attrs) {
            scope.contentUrl = 'img/parking/'+attrs.templateUrl+'.svg';
            attrs.$observe("template-url", function(v){
                scope.contentUrl = 'img/parking/'+v+'.svg';
            });
        },
        template: '<div ng-include="contentUrl"></div>'
    }
}]);

并在html <parking-image id="parking-image" template-url="Area_2"></parking-image>

中

我看了一眼Angular.js directive dynamic templateURL，但它似乎无法正常工作。

Answer 1

正确的方法是在templateUrl上观察，而不是template-url：

attrs.$observe("templateUrl", function(v){
    scope.contentUrl = 'img/parking/'+v+'.svg';
});