javascript - 创建动态模板并绑定(bind)内容 Angular

Question

关注这些精彩的文章 link我已经编写了自己的指令来动态地为窗口创建一个模板，该窗口必须以必须发送的数据的性质为特征，更清楚地说，我的应用程序必须发送文本输入，该指令创建一个输入区域，而不是在必须发送 bool 值的情况下的复选框。
成功获取指令后，我发现绑定(bind)模板内容以将其发回时存在问题。
我已阅读directive的文档，我发现嵌入值也许可以帮助我，但我的尝试没有成功，我在下面编写了代码，就像它们在我的应用程序中一样

HTML

<div id="notespace">
    <div id="userContainer" >
        <template-type content="additionalField">
                {{toBind}}
        </template-type>
        <button ng-click="addNote(toBind)">OK</button>
    </div>
</div>

HTML Controller 页面的 JS 文件

var noteCtrl = function ($scope) {   
        $scope.additionalField=[{
             template:'text'
             }]

        for(var counter=0;counter<$scope.additionalField.length;counter++){
            var template;
            switch ($scope.additionaField[counter].template) {
                case 'text':
                    template = 'inputNote';
                    break;
                case 'otherTypeOfText':
                    template = 'areaNote';
                    break;
                case 'number':
                    template = 'inputNote';
                    break;                   
                case 'bool':
                    template = 'checkNote';
                    break;
                case 'file':
                    template = 'fileNote';
                    break;
            }
        }
    })
$scope.addNote=function(a) {
    alert(a);
}

指令的 JS 文件

templateApp.directive('templateType',function($compile){
    var inputNote='<div><input type="text"/></div>';
    var areaNote='<div><textarea ></textarea></div>';
    var checkNote='<div><input type="checkbox" /></div>';
    var fileNote='<div >file</div>';

    var getTemplate=function(type){
        var template='';
        switch (type) {
            case 'inputNote':
                template = inputNote;
                break;
            case 'areaNote':
                template = areaNote;
                break;
            case 'checkNote':
                template = checkNote;
                break;
            case 'fileNote':
                template = fileNote;
                break;
        }
        return template;
    };
    var linker=function(scope,element,attrs){

        element.html(getTemplate(scope.content.template));
        $compile(element.contents())(scope);
    };
    return{
        restrict:"E",
        replace:true,
        transclude:true,
        link:linker,
        scope:{
            content:'='
        }
    };
});

要非常明确的是，问题是 addNote 函数的警报不打印任何内容或未定义，而不是像 inputArea 那样打印模板的内容

Answer 1

如果您想显示指令内发送的值，只需添加 ng-transclude将指令添加到要在其中复制表达式 toBind 的内插值的元素.

app.directive('foobar', [function() {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>',
        link: ...
    }
}])

用法:

<foobar>{{someValueFromScope}}</foobar>

结果:

<div>someValueFromScope</div>

编辑:

如果我现在明白你的问题，你可以这样做:

<template-type content="additionalField" option="toBind"></template-type>

指令中:

var inputNote='<div><input type="text" ng-model="option"/></div>';

scope: {
    content: '=',
    option: '@'
}

现在，当您更改输入内容时，它将反射(reflect)在 option 中变量。

编辑2:

我有一个工作示例:jsfiddle

我还更正了之前编辑中的代码。

编辑3:当您更改 options 的值时，该指令广播一个事件 optionsValueChanged到其父范围(恰好是 Controller 的范围)。作用域通过更新 data.anotherValue 的值来响应此事件。 。但这并不是真正应该处理这些事情的方式，如果您确实需要在多个地方使用一个值，那么最好使用 provider ( value 或 service )。这与您的问题并不真正相关/有用。