Как получить элемент ввода из директивы до того, как шаблон перезапишет содержимое?
HTML
<div xxx>
<input a="1" />
</div>
JS
app.directive('xxx', function(){
return {
restrict: 'A',
template: '<p></p>',
replace: true, //if false, just leaves the parent div, still no input
compile: function(element, attrs) {
console.log(element);
return function (scope, iElement, iAttrs) {
}
}
};
});
Я нахожусь на angular 1.0.x, я не могу передать необязательные параметры области с помощью '=?' синтаксис, и я хочу, чтобы можно было отменить часть шаблона по умолчанию в директиве очень гибким способом. вместо того, чтобы добавлять переменную или атрибут scope каждый раз, когда я только планирую пройти через директиву, я хочу иметь возможность использовать весь элемент, который будет использоваться.
изменить вход должен сохранять область действия директивы, а не родительскую.
изменить Я пытаюсь включить частичный шаблон внутри директивы, которая перезапишет часть фактического шаблона. Часть, которую я включаю, поэтому должна иметь доступ к области директивы, а не к родительским.
Обновление Кажется, если я не предоставляю шаблон или URL-адрес шаблона и вместо этого заменю содержимое вручную, используя $templateCache, я могу получить доступ к внутренним элементам. Я хочу позволить angular обрабатывать шаблон и замену, хотя и просто хочу иметь доступ к содержимому в директиве, естественно, до того, как они будут заменены.
Решение Plunkr
HTML
<body ng-controller="MainCtrl">
<div editable="obj.email">
<input validate-email="error message" ng-model="obj.email" name="contactEmail" type="text" />
</div>
</body>
JS
app.controller('MainCtrl', function($scope) {
$scope.obj = {
email: 'xxx'
};
});
app.directive('editable', function($log){
return {
restrict: 'A',
transclude: true,
template: '<div ng-show="localScopeVar">{{value}}<div ng-transclude></div></div>',
scope: {
value: '=editable'
},
link: function(scope) {
scope.localScopeVar = true;
}
};
});
app.directive('validateEmail', function($log){
return {
restrict: 'A',
require: 'ngModel',
scope: true,
link: function(scope, el, attrs, ctrl) {
console.log(attrs['validateEmail']);
}
};
});