AngularJS指令運行時間模板更改

我一直在嘗試製作一個輸入指令，它允許使用不同的輸入類型（例如Interval（min-max），DateTime，Number，Text ...）。每當用戶改變數據的類型時，相應的輸入改變其模板是非常重要的。我還需要能夠在頁面上有多個輸入（請參閱PLUNKR以更好地理解）。AngularJS指令運行時間模板更改

經過大量的反覆試驗和研究，我得出結論，我需要觀察屬性（偉大的輸入），根據所選輸入類型的值來替換我的輸入模板，以及編譯它。但我無法在編譯功能中做到這一點，並且我的手錶在鏈接功能中無法正常工作（我正在獲取t1，t2）。因此，我需要做的是，改變select（type）中的值，改變輸入模板（爲了簡單起見，我只對不同的輸入類型進行了顏色編碼）。

$scope.$watch('greatInput', function (newVal) { 
    console.log(newVal); 
    html = getTemplate(newVal); 
    $elem.html('').append($compile(html)($scope)); 
});

這是非常應該做的工作（有一些變化，根據它實現）的功能，但我不能找到合適的地方吧。

完整代碼上： http://plnkr.co/edit/BCuiqg?p=preview

來源

2015-04-29 lexluthor1391

可能重複 - 指令模板動態]（http://stackoverflow.com/questions/14862315/angularjs-directive-template-dynamic） –

@ TechMa9iac你能詳細說明嗎？我遇到了那個，我無法找到我需要的東西。我再次研究這個問題，這次更深入了，而且我仍然沒有看到我怎麼能從我接受的答案中使用jsbin。有什麼我失蹤？ – lexluthor1391

目前最簡單的辦法是在指令模板中使用ng-if S和綁定的輸入類型的範圍：AngularJS的

.directive("greatInput", function(){ 
    return { 
    template: '<input ng-if="isStr()" type="txt" ng-model="greatInputModel">\ 
       <input ng-if="isInt()" type="number" ng-model="greatInputModel">\ 
       <input ng-if="isDbl()" type="number" ng-model="greatInputModel">', 
    scope: { 
     greatInputModel: "=", 
     greatInputType: "@", 
     // etc... 
    }, 
    link: function($scope){ 
     $scope.isStr = function(){ 
      return $scope.greatInputType === "5" || someotherCondition(); 
     } 
     // same for $scope.isInt and $scope.isDbl 
    } 
    } 
});

來源

2015-05-09 05:38:15

這是一個超級遲到的答案，但它可以幫助任何人查看它。你提供的解決方案的工作原理，但我們有不同的輸入類型的一些巨大的模板，所以我們最終使用我的問題的代碼。我們遇到的問題是依賴注入。當時，我們對Angular的經驗不夠。我相信我們增加了一個額外的不必要的依賴，這導致了一個錯誤。 – lexluthor1391

AngularJS指令運行時間模板更改

回答

相關問題