Question

答案似乎很容易 - 但事实并非如此，至少不适合我。

以下是GitHub上的完整示例：https://github.com/MikeMitterer/Angular.Accordion
透露给JS :(工作样本）http://www.mikemitterer.at/fileadmin/sourcesamples/accordion/
我正在谈论的代码部分：http://goo.gl/BlihdM

我想要的是获取一个html-snippet，在本例中为“accordion-toolbar”并将其移动到DOM中的另一个位置。

<accordion-group heading="With Toolbar" >
    <accordion-toolbar>
        Hallo Toolbar
    </accordion-toolbar>
    This is just some content to illustrate fancy headings.
</accordion-group>

结果：

enter image description here

问题出现了：

@Component(selector: 'accordion-toolbar')
class AccordionToolbarComponent {

    AccordionToolbarComponent(final html.Element element,final AccordionGroupComponent group) {
        // worked pre Angular 1.0
        //element.remove();
        //group.toolbar = element;

        // Hack??? (was necessary for Decorator - but ist obsolete now for Component)
        // element.style.display = "none";
        group.toolbar = element.innerHtml;
    }
}

element.remove();适用于1.0之前的版本，但现在如果删除该元素，它将以某种方式由Angular恢复。现在我将display-style设置为none并创建一个新元素 - 但必须有更好的方法......

Snippet显示了如何定义一个accordion-li： [更新]
已将模板从<content-append>...</content-append>更改为<span ng-bind-html="toolbar"></span>

<li class="panel panel-default accordion">
    <div class="panel-heading">
        <h4 class="panel-title">
            <i class="fa" ng-class="{'fa-minus-square': isOpen, 'fa-plus-square': !isOpen}" ng-click="isOpen = !isOpen"></i>
            <a class="accordion-toggle" ng-click="isOpen = !isOpen">
                <span ng-bind-html="header"></span>
            </a>
        </h4>
        <div class="accordion-toolbar pull-right" ng-if="toolbar != null">
            <span ng-bind-html="toolbar"></span>
        </div>
    </div>
    <div class="panel-collapse accordion collapse" collapse="!isOpen">
        <div class="panel-body">
            <content></content>
        </div>
    </div>
</li>

[更新II]]
我仍然不确定隐藏基本元素是否只是一个丑陋的黑客，但主要问题是绑定在ng-bind-html中不起作用。

我找到了Günters样本：http://goo.gl/GVOHPA但它似乎不再起作用了。

[更新III]]
更进一步。我从Angular-NgInclude中借了一些代码。

@Decorator(selector: 'my-bind-html')
class MyBindHtmlComponent {
    final _logger = new Logger('webapp_base_ui_angular.mm_uia_accordion.MyBindHtmlDirective');

    final html.Element element;
    final ViewFactoryCache viewFactoryCache;
    final DirectiveInjector directiveInjector;
    final DirectiveMap directives;

    // Here I can use RootScope or Scope 
    final RootScope scope;

    View _view;
    Scope _childScope;

    MyBindHtmlComponent(this.element, this.scope, this.viewFactoryCache, this.directiveInjector, this.directives);

    @NgOneWay('node')
    set node(value) {

        _cleanUp();

        if (value != null && value != '') {
            _updateContent(viewFactoryCache.fromHtml(value, directives));
        }
    }

    _cleanUp() {
        if (_view == null) return;
        _view.nodes.forEach((node) => node.remove);
        _childScope.destroy();
        _childScope = null;
        element.innerHtml = '';
        _view = null;
    }

    _updateContent(final ViewFactory viewFactory) {
        // create a new scope
        _childScope = scope.createProtoChild();
        _view = viewFactory(_childScope, directiveInjector);
        _view.nodes.forEach((node) => element.append(node));
    }
}

accordion_group中的模板：

<li class="panel panel-default accordion">
    <div class="panel-heading">
        <h4 class="panel-title">
            <i class="fa" ng-class="{'fa-minus-square': isOpen, 'fa-plus-square': !isOpen}" ng-click="isOpen = !isOpen"></i>
            <a class="accordion-toggle" ng-click="isOpen = !isOpen">
                <my-bind-html node="header"></my-bind-html>
            </a>
        </h4>
        <div class="accordion-toolbar pull-right" ng-if="toolbar != null">
            <my-bind-html node="toolbar"></my-bind-html>
        </div>
    </div>
    <div class="panel-collapse accordion collapse" collapse="!isOpen">
        <div class="panel-body">
            <content></content>
        </div>
    </div>
</li>

这还不错 - 它几乎正常运作。现在的最后一个问题是使用哪个Scope。如果我使用Scope，它只会获取/绑定在accordion-group中定义的变量。如果我使用RootScope，它将获取在AppController中定义的变量。

<accordion-group ng-repeat="name in names" heading="Dynamic <strong>{{name}}</strong> {{title}}">
    <accordion-toolbar>
        <a class="toolbar" href="#">Hallo {{name}} + Title: {{title}}</a>
    </accordion-toolbar>
    Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es
    bedeutet,
    ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang
    gerissen.
</accordion-group>

如果我使用RootScope，则无法找到 name 。我得到了

Class 'AccordionGroupComponent' has no instance getter 'name'.
NoSuchMethodError: method not found: 'name'
Receiver: Instance of 'AccordionGroupComponent'
Arguments: []

任何提示？

如何替换AngularDart＆gt; = 1.0中的元素

0 个答案: