AngularJS 如何在替换之前访问指令中的元素 [英] AngularJS How to access elements inside directive before they get replaced
问题描述
如何在模板覆盖内容之前从指令中获取输入元素?
html
<input a="1"/>js
app.directive('xxx', function(){返回 {限制:'A'，模板:'<p></p>',replace: true,//如果为false，就离开父div，仍然没有输入编译:函数(元素，属性){控制台日志(元素)；返回函数(范围，iElement，iAttrs){}}};});我使用的是 angular 1.0.x，我无法使用=?"传入可选范围参数语法，我希望能够以非常灵活的方式覆盖指令的默认模板的一部分.我希望能够提供要使用的整个元素，而不是每次计划通过指令时添加范围变量或属性.
编辑输入必须保留指令的范围，而不是父级.
编辑我试图在指令中包含一个部分模板，该指令将覆盖一部分实际模板.因此，我包含的部分需要访问指令的作用域，而不是父级的作用域.
更新如果我不提供模板或模板 URL，而是使用 $templateCache 手动替换内容，我似乎可以访问内部元素.我想让 angular 处理模板和替换，只是希望能够在替换之前自然地访问指令中的内容.
解决方案Plunkr
html
<div editable="obj.email"><input validate-email="错误信息" ng-model="obj.email" name="contactEmail" type="text"/>js
app.controller('MainCtrl', function($scope) {$scope.obj = {电子邮件:'xxx'};});app.directive('editable', function($log){返回 {限制:'A'，转置:真实，模板:'<div ng-show="localScopeVar">{{value}}<div ng-transclude></div></div>',范围: {值:'=可编辑'},链接:功能(范围){scope.localScopeVar = true;}};});app.directive('validateEmail', function($log){返回 {限制:'A'，要求:'ngModel'，范围:真实，链接:功能(范围，EL，属性，ctrl){console.log(attrs['validateEmail']);}};});我相信您正在寻找 transclude 函数(链接到 1.0.8 文档).你可以看到发生了什么:
app.directive('xxx', function($log){返回 {限制:'A'，转置:真实，编译:函数(元素，属性，transclude){$log.info("每个实例元素:", element);返回函数(范围，iElement，iAttrs){$log.info("此实例元素:", element);transclude(范围，功能(克隆){$log.info("克隆:", 克隆);});}}};});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) {
}
}
};
});
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.
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.
Solution 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']);
}
};
});
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屋！
