0

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

HTML

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

HTML控制器页面的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);
}

指令的 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 一样的模板的内容

4

2 回答 2

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)。它与您的问题并不真正相关/有用。

于 2014-05-13T10:39:41.103 回答
0

在 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>
于 2014-05-13T11:01:34.253 回答