AngularJS 创建一个指令然后使用另一个指令 [英] AngularJS creating a directive then uses another directive
问题描述
我正在尝试创建一个指令来减少我必须编写的样板代码.
I'm trying to create a directive to cut down on the boilerplate code that I'd have to write.
我正在使用 angular xeditable 指令来允许内联编辑,但是当我从指令中添加 xeditable 指令属性时,它不起作用.
I'm using the angular xeditable directive to allow for inline editing, but when I add the xeditable directive attributes from my directive, it doesn't work.
当我说它不起作用时,我的意思是通常当我点击元素时会出现一个输入框,而现在当我点击元素时没有任何反应.
When I say it doesn't work, I mean usually when I click on the element there is an input box that appears, and right now nothing happens when I click on the element.
Glenn.directive('edit', function() {
return {
restrict: 'A',
template: '{{ content.' + 'ParamData' + '.data }}',
scope: {
ParamData: '@edit'
},
link: function(scope, element, attrs) {
element.attr('editable-text', 'content.' + attrs.edit + '.data');
element.attr('onbeforesave', 'update($data, content.' + attrs.edit +'.id');
}
}
});
所以,我的第一个问题是 xeditable 指令不起作用,因为它在我的内部.我是创建 angularjs 指令的新手,但我想知道它是否与编译方式有关?
So, my first problem is that the xeditable directive doesn't work because it's inside of mine. I'm new to creating angularjs directives, but am wondering if it could have something to do with the way its being compiled?
我的第二个问题是模板.如果我的模板看起来像这样
My second problem is with the template. If my template just looks like this
template: '{{ ParamData }}'
然后它输出正确的数据,但如果没有其他部分引用范围数据,我就无法使其工作.
Then it outputs the correct data, but I can't make it work without the other pieces to reference the scope data.
此外,这里是使用指令的视图
Also, here is what the view looks like using the directive
<h2 edit="portrait_description_title"></h2>
如果我不使用指令来减少锅炉代码,它会是什么样子
And here is what it would look like if I didn't use a directive to cut down on the boiler code
<h1 editable-text="content.portrait_description_title.data" onbeforesave="update($data, content.portrait_description_title.id)">
{{ content.portrait_description_title.data }}
</h1>
感谢您的建议!
推荐答案
添加这些属性后你必须重新编译元素,这里是一个例子:
You have to recompile the element after adding those attributes, here is an example:
示例 plunker: http://plnkr.co/edit/00Lb4A9rVSZuZjkNyn2o?p=预览
.directive('edit', function($compile) {
return {
restrict: 'A',
priority: 1000,
terminal: true, // only compile this directive at first, will compile others later in link function
template: function (tElement, tAttrs) {
return '{{ content.' + tAttrs.edit + '.data }}';
},
link: function(scope, element, attrs) {
attrs.$set('editable-text', 'content.' + attrs.edit + '.data');
attrs.$set('onbeforesave', 'update($data, content.' + attrs.edit + '.id)');
attrs.$set('edit', null); // remove self to avoid recursion.
$compile(element)(scope);
}
}
});
需要考虑的事项:
- 删除隔离的作用域以简化事情,因为您似乎希望首先直接绑定到控制器
content.portrait_description_title.data
中的作用域. template:
也接受函数,这样你就可以得到edit
属性值来构造模板.- 标记为
terminal
指令并提高priority
,这样在第一次运行时,只有这个指令(在同一元素中的其他指令中)会被编译.立> attrs.$set()
对于添加/删除属性很有用,用它来添加editable-text
指令和onbeforesave
.- 删除指令本身,即
edit
属性,以防止在下一次编译后递归. - 使用
$compile
服务重新编译元素,以使editable-text
和onbeforesave
工作.
- remove the isolated scope to simplify things as it seems you would like to do the binding directly to a scope in controller
content.portrait_description_title.data
in the first place. template:
also accept function, this way you can get theedit
attribute value to construct the template.- mark as a
terminal
directive and raisepriority
, so that at first run, only this diective (out of others in the same element) will get compiled. attrs.$set()
is useful for adding/removing attributes, use it to add theeditable-text
directive andonbeforesave
.- remove the directive itself, i.e. the
edit
attribute, to prevent a recursion after a next compilation. - use
$compile
service to recompile the element, in order to makeeditable-text
andonbeforesave
works.
希望这会有所帮助.
这篇关于AngularJS 创建一个指令然后使用另一个指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!