AngularJs指令，顯示模板

-1

我有div，根據服務器數據動態生成。所有這些div都有它們的keyboard值：numpad或fullkeyboard（基於服務器數據）。例如：AngularJs指令，顯示模板

[ 
    { 
     label: 'NICK NAME', 
     keyboard: 'fullKeyboard' 
    }, 
    { 
     label: 'AGE', 
     keyboard: 'numpad' 
    } 
]

我有模板，對於鍵盤。

我想要的是，當用戶點擊這些div時，顯示正確的鍵盤模板。

怎麼可能做到？

我的HTML：

<div id="container-of-inputDivs"> 
    <div ng-repeat="(key, item) in dataSource" data-keyboard="item.keyboard"></div> 
</div> 



<keyboard />

來源

2015-12-21 aw-bubakik

您能否展示您的觀點，例如html部分？ – Hinrich

Thx。 ''做什麼？這是一個指令嗎？ – Hinrich

是的。這將是指令，將加載鍵盤模板。我不知道我是否正確。我是角度初學者 –

你的鍵盤指令必須有一定範圍的屬性，就像這樣：

<div keyboard="activeKeyboard"></div>

然後，你的div看起來是這樣的（假設dataSource爲您提供的陣列問題）：

<div id="container-of-inputDivs"> 
    <div ng-repeat="item in dataSource" ng-click="activeKeyboard=item"> 
</div>

這樣，當你點擊div時，activeKeyboard設置爲item，該值存儲在範圍內的變量activeKeyboard內。

從你的指令，你可以返回這樣的事情：

{ 
    template: 'your-template-here', 
    scope: { 
    keyboard: '=' 
    }, 
    ... 
}

您隔離帶的雙向結合的範圍。您現在可以在模板中使用獨立的鍵盤對象。

編輯： 舉例在如何使用它

有很多方法從這裏走。這裏有兩個例子：

1）採用動態碼內模板

{ 
    template: '<div>{{keyboard.label}}</div>', 
    scope: { 
    keyboard: '=' 
    }, 
    ... 
}

2）不同的模板基於範圍

假設你有兩個不同的模板，你要根據你的鍵盤的範圍包括，：/templates/fullKeyboard.html和/templates/numpad.html。

{ 
    template: '<div ng-include="getTemplateUrl()"></div>', 
    scope: { 
    keyboard: '=' 
    }, 
    controller: function($scope) { 
    $scope.getTemplateUrl = function() { 
     return '/templates/' + $scope.keyboard.keyboard + '.html'; 
    } 
    } 
}

正如我所說的，有做的許多方面，取決於你的架構和你想要達到的目標。

來源

2015-12-21 09:26:31 Hinrich

謝謝。但我現在的錯誤： '多指令[鍵盤（模塊：SPS.Directives），鍵盤（模塊：SPS.Directives）尋求新的/孤立的：{5}' –

我想那是因爲你使用'keyboard'兩次，作爲指令名稱和變量名稱。我更新了我的答案... – Hinrich

現在沒有錯誤。但是，我不明白如何更改模板的網址，在div的點擊 –

你可以使用NG-包括，然後有一個函數返回依賴於鍵盤變量正確的HTML模板。

例如：

vm.GetKeyboardTemplate = function(keyboard){return keyboard + ".html";} 

<div ng-include="{{vm.GetKeyboardTemplate(item.keyboard);}}"></div>

來源

2015-12-21 09:02:06

AngularJs指令，顯示模板

回答

相關問題