AngularJS创造了一项指令则使用另一个指令 [英] AngularJS creating a directive then uses another directive

问题描述

我试图创造一个指令，以减少样板code，我不得不写。

I'm trying to create a directive to cut down on the boilerplate code that I'd have to write.

我使用的角度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>

这是它会是什么样子，如果我没有用一个指令，以减少对锅炉code

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>

感谢您的任何意见！

Thanks for any advice!

推荐答案

您可以选择添加这些属性后重新编译元素，这里有一个例子：

You have to recompile the element after adding those attributes, here is an example:

示例plunker： http://plnkr.co /编辑/ 00Lb4A9rVSZuZjkNyn2o？p = preVIEW

.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);
    }
  }
});

需要考虑的事项：

Things to consider:

• 删除隔离的范围，因为它似乎你想要做的事情简单化直接绑定到控制器 content.portrait_description_title.data 摆在首位的作用域。


• 模板：也接受功能，这样你可以得到修改属性值来构造模板


• 标记为端子指令，提高优先级，所以在第一次运行，仅此diective（满分人在相同的元素）将被编译。


• ATTRS。$集（）是添加/删除属性，用它来添加可编辑的文本指令和 onbeforesave 。


• 删除指令本身，即修改属性，以prevent递归下一个编译后。


• 使用 $编译服务重新编译的元素，为了让可编辑的文本和 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 the edit attribute value to construct the template.
• mark as a terminal directive and raise priority, 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 the editable-text directive and onbeforesave.
• 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 make editable-text and onbeforesave works.

希望这有助于。

这篇关于AngularJS创造了一项指令则使用另一个指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！