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個指令

回答

相關問題