Я пытаюсь написать очень гибкую директиву. Для этого я хочу, чтобы пользователь определял шаблон, используемый в части моего возврата (как показано в директива ua-bootstrap typeahead).
Итак, я определяю свой шаблон следующим образом:
<script type="text/ng-template" id="myDirectivesCustomTemplate.html">
<ul>
<li ng-repeat="value in values">
<a ng-click="doSomething(value.id)">
{{value.name}}
</a>
</li>
</ul>
</script>
Я устанавливаю этот шаблон в моей директиве
<div
my-directive
my-directive-custom-template="myDirectivesCustomTemplate.html"
my-directive-data="someScopeData">
Теперь в моей директиве, как я могу отобразить пользовательский шаблон и использовать его с переданными данными? Когда я пытаюсь использовать его для возврата в шаблон, он генерирует ошибку ReferenceError: $scope is not defined
. Если я вызываю его без области видимости, он говорит ReferenceError: myDirectiveCustomTemplate is not defined
Ошибка.
Где и как я могу использовать свой шаблон, если я просто не хочу использовать его как прямой возврат?
EDIT: скажем, это моя директива:
(function() {
'use strict';
var Combobox = function() {
var displayInputField = elem.find('input.dropdown');
scope.$watch(scope.nsdComboboxModel,function(newVal){
/* search for newVal in given data object */
scope.setDisplayInputValue(newVal);
});
scope.setDisplayInputValue = function(value)
{
displayInputField.val(value);
};
scope.elementSelected = function (item, model, label) {
scope.ComboboxCallback(item);
scope.setDisplayInputValue(label);
};
}
return {
restrict: 'A',
transclude: true,
scope: {
Combobox: '@', /* used as HTML/CSS-id/name/path */
ComboboxModel: '=', /* the actual AngularJS model (ng-model) */
ComboboxAutocompleteData: '=', /* the data used for autoComplete (must be array of objects having id and value) */
ComboboxDropdownData: '=', /* data used by the dropdown template */
ComboboxCallback: '=', /* a callback function called with selected autocomplete data item on select */
ComboboxLabel: '@', /* label for the input field */
ComboboxDropdownTemplate: '@' /* label for the input field */
},
template:
'<section class="-combobox-directive container-fluid">' +
'<label for="{{Combobox}}" ng-if="ComboboxTranslation" translate="{{ComboboxLabel}}"></label>' +
'<div class="combobox input-group">' +
'<input type="text" ' +
'id="{{Combobox}}" ' +
'autocomplete="off" ' +
'ng-model="ComboboxDestinationDisplay" ' +
'data-toggle="dropdown" ' +
'typeahead="value as location.value for location in ComboboxAutocompleteData | filter:$viewValue" ' +
'typeahead-editable="false" ' +
'typeahead-on-select="elementSelected($item, $model, $label)" ' +
'class="form-control dropdown">' + // dropdown-toggle
'<span data-toggle="dropdown" class="input-group-addon dropdown-toggle">' +
'<span class="glyphicon glyphicon-globe"></span>' +
'</span>' +
//$compile(ComboboxDropdownTemplate) +
'</div>' +
'</section>',
link: link
};
};
angular.module('vibe.directives').directive('nsdCombobox', [NsdCombobox]);
})();