如何重新编译指令属性

时间:2016-01-30 21:10:14

标签: javascript angularjs

我制作了一个名为“esf-cb”的自定义指令,并在同一元素上使用另一个自定义指令来添加本地化资源。 “esf-cb”指令代码是:

.directive('esfCb', function () {
return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
        custId: '@',
        custLabel: '@'
    },
    templateUrl: '/partials/custominput/checkbox.html',
    link: function (scope, element, attrs, ctrl, transcFun) {
        //alert('post cb');
        transcFun(function (cloned) {
            //scope.type = angular.element(cloned[1]).attr('type') == 'checkbox' ? 'checkbox' : 'radio';
            element.find('placeholder').replaceWith(cloned);
        })
    }
}
})

它用作:

<esf-cb cust-id="{{input.id}}" resource-key="fnLabel" resource-attr="cust-label">
                        <input type="checkbox" ng-model="input.isChecked" id="{{input.id}}" ng-disabled="input.isDisabled" name="group-cb" class="toggler-input" />
                    </esf-cb>

指令模板是:

<div role="checkbox" class="custom-input">
    <placeholder></placeholder>
    <label for="{{custId}}" class="toggler-btn">{{custLabel}}</label>
    <div class="toggler-state"></div>
</div>

该指令采用属性“cust-label”将其值附加到复选框旁边的标签上。 我正在使用另一个指令来定义cust标签中名为resource-key的文本,它有另一个名为resource-attr的属性。它使用属性的名称来添加资源键值。

这是'resource-key'指令代码:

.directive('resourceKey', ['$compile', function ($compile) {
    return {
        link: {
            pre: function (scope, element, attrs) {
                //var $resValue = scope[attrs.resourceKey],
                //    $resAttr = attrs.resourceAttr || 'inner';
                //$resAttr == 'inner' ? element.html($resValue) : attrs.$set($resAttr, $resValue);
                element.attr('cust-label', 'hossam');
                $compile(element.contents())(scope);
            }
        }
    }
}])

如果cust-label属性在指令标记内被硬编码,则'esf-cb'指令很有效。但是当我使用resource-key指令时,它会在将资源键添加到标签之前进行编译。所以它不呈现。 那么在添加资源键指令???。

之后如何重新编译'esf-cb'指令

谢谢:)

0 个答案:

没有答案