Question

我有以下Angular 1指令：

return function(module) {
    module.directive('myButtonUpgrade', myButtonUpgrade);

    function myButtonUpgrade() {
        return {
            restrict: 'E',                
            template: template(),                
            scope: {
                image: '=',
                imageColour: '='
            }
        };

        function template() {
            var html = '<my-button visible="flipVisible"\
                            enabled="enabled"\
                            image="{{::image}}"\
                            image-colour="{{::imageColour}}"\
                       </my-button>';

            return html;
        }
    }

    return myButtonUpgrade;
};

该指令使用＆＃34; my-button＆＃34;其模板中的指令。＆＃34;我的按钮＆＃34;指令要求＆＃34;图像＆＃34;和＆＃34;图像颜色＆＃34;在编译模板之前要存在的属性值。

我有以下Angular 2组件升级Angular 1：

import { Component } from '@angular/core';
import { upgradeAdapter } from '../../../upgrade/index';

var myButtonEx = upgradeAdapter.upgradeNg1Component('myButtonUpgrade');

@Component({
    selector: 'my-button-ex',
    template: '<my-button-ex [image]="refresh"></my-button-ex>',
    directives: [myButtonEx] 
})
export class ButtonExComponent {        
}

正如您所看到的，模板将[image]绑定设置为＆＃34;刷新＆＃34;但是在渲染＆＃34; my-button-ex＆＃34;时无法解决。 Angular 1指令。

看起来升级适配器首先尝试编译HTML语法而不解析模板参数：

upgrade_ng1_adapter.ts
compileTemplate(...){
   this.linkFn = compileHtml(this.directive.template);
}

＆＃34; this.directive.template＆＃34; - 模板参数未解决！

有什么想法吗？

未针对升级的Angular 1组件指令解析模板属性

0 个答案: