创建动态模板并绑定内容角度

Question

按照这些伟大的文章link，我已经编写了我自己的指令，为一个窗口创建一个模板，该窗口必须以必须发送的数据的性质为特征，更清楚我的应用程序有为了发送文本输入，该指令创建一个输入区域，而不是在必须发送布尔值的情况下的复选框 在成功获得指令后，我发现了绑定模板内容以将其发回的问题 我已经阅读了directive的文档，我找到了可能对我有帮助的转换值，但是我的尝试没有成功，我写下面的代码，就像我们的应用程序中的ara一样/>

HTML

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

HTML控制器页面的JSfile

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);
}

DIRECTIVE的JSfile

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: '@'
}

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

编辑2：

我有一个有效的例子：jsfiddle

我还更正了上一次编辑中的代码。

编辑3： 当您更改options的值时，该指令会向其父作用域（恰好是控制器的作用域）广播一个事件optionsValueChanged。范围通过更新data.anotherValue的值来对此事件做出反应。但这并不是应该处理这些事情的方式，如果你真的需要在一个以上的地方使用一个值，那么最好使用provider（value或service）。它对你的问题并不真正相关/有用。

Answer 2

在Html中你应该添加像这样的控制器

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