Question

我对AngularJS很新，并且在我的项目中遇到了一些范围不足的问题。我将项目简化到最小，以便专注于问题。

我有一个“overlay”指令，它在我的代码中显示为html标记，最终将呈现为弹出窗口。在这个叠加层中，我希望有一个各种输入的列表，即我模型中的“输入”数组，它应该根据我模型中名为“Type”的参数呈现为文本框，下拉列表，复选框等。。 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>'
        };
    })

并且控制器只是将值放在“inputs”数组中：

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

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

此代码的输出为：

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

虽然我希望在“textbox”和“checkbox”之后看到输入“Parameter”值。所以，我的两个问题如下：

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

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

非常感谢那些试图帮助我的人

彼得

Answer 1

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

就像ngRepeat这样的指令被用作ng-repeat="x in x"一样。

Answer 2

我认为这个答案在某种程度上也回答了我的第二个问题，但我想分享一下，看看是否有人能提出更有条理的解决方案。

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

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

angularjs：丢失2个指令之间的范围

2 个答案: