AngularJS如何在替换之前访问指令中的元素 [英] AngularJS How to access elements inside directive before they get replaced
问题描述
在模板覆盖内容之前，如何从指令中获取输入元素?
How do I get the input element from within the directive before the template overwrites the contents?
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上，我不能使用'=?'传递可选的范围参数语法，我希望能够以一种非常灵活的方式覆盖指令默认模板的一部分.我希望能够提供要使用的整个元素，而不是在我每次计划通过该指令时都添加范围变量或属性.
i am on angular 1.0.x, I cannot pass in optional scope parameters with the '=?' syntax and i want to be able to override a portion of the default template of the directive in a very flexible way. instead of adding a scope variable or attribute everytime that I just plan on passing through the directive, I want to be able to supply the whole element to be used.
修改 输入必须保留指令的范围，而不是父项.
edit the input must retain the scope of the directive, and not the parent.
修改 我试图在指令内包含部分模板，该指令将覆盖一部分实际模板.因此，我要包括的那部分需要访问该指令的作用域，而不是父项的作用域.
edit I am trying to include a partial template inside a directive that will overwrite a piece of the actual template. The piece I am including therefore needs to have access to the directive's scope and not the parent's.
更新 看来，如果我不提供模板或模板URL，而是使用$ templateCache手动替换内容，则可以访问内部元素.我想让angular处理模板和替换内容，只是希望能够在替换内容之前自然地访问指令中的内容.
Update It seems if I do not provide a template or a template URL and instead replace the contents manually using the $templateCache I can have access to the inner elements. I want to let angular handle the template and the replacement though and just want to be able to access the contents in the directive naturally before they get replaced.
解决方案 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']);
}
};
});
推荐答案
我相信您正在寻找 transclude 函数(链接到1.0.8文档).您可以看到发生了什么事:
I believe you're looking for the transclude function (link is to 1.0.8 docs). You can see what's going on with:
app.directive('xxx', function($log){
return {
restrict: 'A',
transclude: true,
compile: function(element, attrs, transclude) {
$log.info("every instance element:", element);
return function (scope, iElement, iAttrs) {
$log.info("this instance element:", element);
transclude(scope, function(clone){
$log.info("clone:", clone);
});
}
}
};
});
这篇关于AngularJS如何在替换之前访问指令中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
