我制作了一个名为“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'指令谢谢:)