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 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屋！