Question

我正在尝试创建一个指令来减少我必须编写的样板代码。

我正在使用angular xeditable指令来允许内联编辑，但是当我从my指令添加xeditable指令属性时，它不起作用。

当我说它不起作用时，我的意思是通常当我点击该元素时会出现一个输入框，现在当我点击该元素时没有任何反应。

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指令的新手，但我想知道它是否与编译它的方式有关？

我的第二个问题是模板。如果我的模板看起来像这样

template: '{{ ParamData }}'

然后它会输出正确的数据，但如果没有其他部分来引用范围数据，我就无法工作。

此外，这是使用指令

的视图

<h2 edit="portrait_description_title"></h2>

如果我没有使用指令来减少锅炉代码

，这就是它的样子

<h1 editable-text="content.portrait_description_title.data" onbeforesave="update($data, content.portrait_description_title.id)">
     {{ content.portrait_description_title.data }}
</h1>

感谢您的任何建议！

Answer 1

添加这些属性后你必须重新编译元素，这是一个例子：

示例plunker： http://plnkr.co/edit/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);
    }
  }
});

需要考虑的事项：

删除隔离范围以简化操作，因为您似乎首先想直接绑定到控制器content.portrait_description_title.data中的范围。
template:也接受函数，这样您就可以获取edit属性值来构建模板。
标记为terminal指令并引发priority，以便在第一次运行时，只有这种死亡（在同一元素中的其他指令）才会被编译。
attrs.$set()对于添加/删除属性很有用，可以使用它来添加editable-text指令和onbeforesave。
删除指令本身，即edit属性，以防止在下一次编译后递归。
使用$compile服务重新编译元素，以使editable-text和onbeforesave有效。

希望这有帮助。

Answer 2

只需在第一个指令的模板中添加另一个指令，并将其绑定到您从attr获取的范围模型。您还可以添加控制器功能，创建更多模型或逻辑并绑定到指令模板。

也许您的属性可能在模板上不可用，而不是您需要将$ watch添加到隔离范围模型并更新控制器内的另一个范围模型。第二个模型需要绑定到模板。有关您可以在AngularJS文档中找到的指令的更多信息，这里也是一篇很好的文章，它可以帮助您：

http://www.sitepoint.com/practical-guide-angularjs-directives-part-two/

AngularJS创建指令然后使用另一个指令

2 个答案: