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指令，显示模板

回答

相关问题