angularjs：2个指令

之间失去范围我是很新，AngularJS和我有我的项目的一些范围亏损的问题。我把项目简化到了最低限度，以便专注于这个问题。angularjs：2个指令

我有一个“叠加”指令，出现在我的代码的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 
     }]; 
    });

这段代码的输出是：

这是我的叠加... textbox：复选框： ...我的覆盖已结束

但我期望在“文本框”和“复选框”后面看到输入“参数”值。所以，我的2个问题有以下几点：

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

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

非常感谢事先向任何人谁会尽力帮助我

彼得

来源

2013-05-18 pliguori

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

就像如何有一个叫ngRepeat指令，用于像ng-repeat="x in x"。

来源

2013-05-18 17:56:58 Langdon

非常感谢兰登，因为你看到我还不是很熟悉框架！现在怎么样问题2，即我如何能动态呈现userinput模板取决于输入“类型”？ – pliguori

我认为，这个答案在某种程度上回答我的第二个问题了，但是我想与大家分享一下，看看是否有人能拿出更多的结构化解决方案。

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

比如我想继续在独立的外部模板输入字段的各种模板......而这个“编译”的使用不看这样的工作方式......

来源

2013-05-18 23:09:20 pliguori

我不确定这是否是最佳解决方案，但是您应该能够将ng-switch和ng-include结合使用，以使用输入类型有条件地呈现正确的模板。 – rtcherry

angularjs：2个指令

回答

相关问题