無法獲取Angular指令中工作的動態模板

我正在嘗試編寫一個具有3種模式的小型角度應用程序。質量保證，製作和沙盒。 QA是有多個按鈕的東西，所以用戶可以選擇他想要的任何值並填充「myModel」。其他兩種模式，生產和沙箱旁邊都有按鈕，用於應用先前選擇的Qa值（使用同步功能從myModel中）。無法獲取Angular指令中工作的動態模板

我爲QA（多個按鈕）和Production，Sandbox（單個按鈕從QA-mymodel進行同步）使用了不同的模板。我能夠呈現QA/Production模板，但QA模板（list of buttons）根本不會出現。

我猜對於按鈕列表的編譯方式，會出現錯誤。

請看看我的代碼爲：http://jsbin.com/sutipo/1/watch?html,js,output

HTML &指令我使用的動態攝像模板低於：

<tr> 
     <td> <strong>Production : </strong> </td> 
     <td> {{types.production.text}} </td> 
     <td><app-typedisplay env="production" status="non-base"></app-typedisplay></td> 
    </tr> 
    <tr> 
     <td> <strong>SandBox : </strong> </td> 
     <td> {{types.sandbox.text}} </td> 
     <td><app-typedisplay env="sandbox" status="non-base"></app-typedisplay></td> 
    </tr> 
    <tr> 
     <td><strong>QA : </strong> 
     <td> {{types.qa.text}} </td> 
     <td><app-typedisplay env="qa" status="base"></app-typedisplay></td> 
    </tr>

而且指令：

app.directive('appTypedisplay', function ($compile) { 

    var getTemplate = function (content) { 
     var template = ''; 
     var base = "<button type='button' class='btn btn-default' " + 
      "ng-class='{active: option.text == model.text}'" + 
      "ng-repeat='option in options' " + 
      "ng-click='activate(option)'>{{option.text}} " + 
      "</button>"; 

     var non_base = "<td> <button " + 
      'ng-click=\'sync("' + content.env + '")\'>' + 
      "Sync to " + content.env + "</button> </td>"; 

     switch (content.status) { 
      case 'base': 
       template = base; 
       break; 
      case 'non-base': 
       template = non_base; 
       break; 
     } 

     return template; 
    }; 

    var linker = function (scope, element, attrs) { 
     element.html(getTemplate(attrs)); 
     $compile(element.contents())(scope); 
    }; 

    return { 
     restrict: 'E', 
     scope: { 
      model: '=', 
      options: '=', 
      env: '=' 
     }, 
     controller: function ($scope) { 
      $scope.activate = function (option) { 
       $scope.model = option; 
      }; 
     }, 
     link: linker 
    }; 
});

這裏有角新手，有人可以請求e幫助我理解爲什麼按鈕模板列表未被正確編譯？

預期的輸出應該如下東西：

enter image description here

來源

2014-11-05 Eswar Rajesh Pinapala

您定義的某些屬性的方式傳遞到指令的隔離範圍，但從來沒有通過實際的模型引用：

<app-typedisplay env="qa" status="base" options="options" model="myModel"></app-typedisplay>

的分離範圍指令不知道任何有關父級範圍的內容，因此所有使用的數據都必須明確地通過屬性傳入

來源

2014-11-05 23:28:31

非常感謝，我能夠通過選項和模型來填充按鈕。我有一個問題。我如何才能使Scope函數可訪問，因爲我無法通過屬性傳遞函數。 – 2014-11-06 00:00:16

您可以通過使用'＆'而不是'='來傳遞它們。您還可以使用'='來傳遞函數引用。您可能需要閱讀傳遞屬性的不同選項。然後總是可以選擇不使用隔離範圍，並允許模型數據傳入指令。 – 2014-11-06 00:46:37

謝謝奧斯汀，非常有幫助。我確實瞭解了傳遞屬性的不同選項，並能夠解決這些問題。 – 2014-11-06 02:30:58

無法獲取Angular指令中工作的動態模板

回答

相關問題