Question

我有一个带有两种文章容器的模板：Viewer和Editor：

<article ng-if="!editor" ng-controller="article">
    <div>Some content</div>
</article>

<article ng-if="editor" ng-controller="article">
    <div mySharedScope></div>
</article>

点击按钮时，用户可以在这两个容器之间切换：

<button ng-click="editor = !editor" ng-bind="editor ? 'Abort' : 'Edit'"></button>

现在我想在第二个容器上创建一个指令。所以这就是我所做的：

app.directive('mySharedScope', function () {
    return {
        template: 'New content'
    };
});

但缺少一些东西，因为这不起作用。我想使用一个指令来做一些DOM mainpulation link: function ($scope, element, attrs) { }

Answer 1

名为'mySharedScope'的指令转换为属性'my-shared-scope'：

<article ng-if="editor" ng-controller="article">
    <div my-shared-scope></div>
</article>

Answer 2

两件事，首先是指令mySharedScope将从驼峰案例中转换为它的指令定义

<div mySharedScope></div>

像这样的破折号

<div my-shared-scope></div>

切换后，您需要确保将第一个指令（文章）中嵌套的内容移植到其模板中，并将ng-transclude指令放在其模板中。

请参阅docs for this on angular website

作为这个的基本实现，我创建了一个小提琴，你的两个指令中的两个在触发按钮时适当切换。内容在这里被转录，所以请随意挑选你需要的内容。

https://jsfiddle.net/wvty8rpc/2/

创建指向单击后显示的模板部分的指令

2 个答案: