指令中的动态templateUrl

詹尼斯·帕拉斯科沃波洛斯

我有以下指令：

Directives.js

module.directive('vdGuarantees', function () {
    return {
        restrict: 'A',
        template: '<div ng-include="contentUrl"></div>',
        link: function(scope, element, attrs) {
            scope.contentUrl = '../../HTML/Directives/Guarantees/6787.html';
            scope.$watch(scope.clientId, function (newValue, oldValue) {
                console.log(scope.clientId);
                //scope.contentUrl = '../../HTML/Directives/Guarantees/' + newValue + '.html'
            });
        }
    };
});

的HTML

<div vd-Guarantees></div>

在我的控制器中，我已定义$scope.clientId为空对象。加载时，控制器正在$http对Web服务执行获取请求，并在success其中填充$scope.clientId。

我正在尝试做的是，当填充clientId时，相应地更改指令的templateUrl。

詹尼斯·帕拉斯科沃波洛斯

在我兄弟的一点帮助下，我找到了解决方案。

第一个错误是我的定义$watch。应该是：

scope.$watch('clientId', function (newValue, oldValue) {
    //code here
});

我必须更改的第二件事是在指令中传递的范围对象。所以我加了

scope: false

在指令定义中，并且使根范围在指令中可用。

现在，完整的指令代码如下所示：

module.directive('vdGuarantees', function () {
    return {
        restrict: 'A',
        template: '<div ng-include="contentUrl"></div>',
        scope: false,
        link: function (scope, element, attrs) {
            scope.$watch('clientId', function (newValue, oldValue) {
                if (newValue !== undefined) {
                    scope.contentUrl = '../../HTML/Directives/Guarantees/' + newValue + '.html';
                }
            });
        }
    };
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。