0

我对 AngularJS 很陌生，并且在我的项目中遇到了一些范围丢失的问题。我将项目简化到最低限度，以便专注于问题。

我有一个“覆盖”指令，它在我的代码中显示为 html 标记，最终将呈现为弹出窗口。在这个叠加层中，我想要一个各种输入的列表，它们是我模型中的“输入”数组，应该根据我模型中名为“类型”的参数呈现为文本框、下拉列表、复选框等. HTML 很简单：

<div ng-app="jsf">
    <div ng-controller="MyCtrl">
        <overlay inputs="inputs">
            <div ng-repeat="input in inputs">
                {{input.Type}}: 
                <userInput input="input">
                 </userInput>
            </div>
        </overlay>
    </div>
</div>

我的指令如下：

.directive('overlay', function () {
        return {
            restrict: 'E',
            transclude: true,
            scope: {
                inputs: '='
            },
            template: '<div>This is my overlay ...</div> <div ng-transclude></div> <div> ...my overlay has ended </div>'
        };
    })

.directive('userInput', function () {
        return {
            restrict: 'E',
            scope: {
                input: '='
            },
            template: '<div style="border: 1px solid black;">' + '<div style="background-color: gray">{{input.Parameter}}</div > ' + '</div>'
        };
    })

控制器只是将值放入“输入”数组中： 

  .controller('MyCtrl', function ($scope) {

        $scope.inputs = [{
            Type: 'textbox',
            Parameter: 'myvalue'
        }, {
            Type: 'checkbox',
            Parameter: true
        }];
    });

这段代码的输出是：

这是我的叠加层...文本框：复选框：...我的叠加层已结束

而我希望在“文本框”和“复选框”之后看到输入的“参数”值。所以，我的两个问题如下：

1）我在尝试将范围从覆盖继承到用户输入指令时做错了什么？2）这是更高级的东西，但这是我的目标：根据“输入”变量的“类型”值，为“用户输入”动态呈现不同模板的最佳方法是什么？

我有一个 JSFiddle 在这里显示我的问题：http: //jsfiddle.net/4fVkm/1/

非常感谢任何愿意帮助我的人

彼得罗

4

2 回答 2

1

您创建了一个名为 的指令userInput，但您尝试使用它，就像<userInput>您应该使用它时一样<user-input>。

就像有一个名为ngRepeatthat 的指令的用法很像ng-repeat="x in x".

于 2013-05-18T17:56:58.397 回答
0

我认为这个答案也以某种方式回答了我的第二个问题，但我想分享它，看看是否有人能提出更结构化的解决方案。

https://stackoverflow.com/a/10646761/1895909

例如，我想将输入字段的各种模板保留在单独的外部模板中......而且这种“编译”用法看起来不像这样工作......

于 2013-05-18T23:09:20.297 回答