AngularJs指令，显示模板

AngularJs directive, show template

本文关键字：显示 指令 AngularJs      更新时间：2023-09-26

我有div，它根据服务器数据动态生成。所有这些div都有它们的keyboard值：numpad或fullkeyboard（基于服务器数据）。例如：

[
    {
        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 />

你的键盘指令必须有一些scope属性，比如：

<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: '='
  },
  ...
}

您可以使用双向绑定来隔离作用域。现在，您可以在模板中使用隔离的键盘对象。

编辑：关于如何使用IT-的示例

从这里开始还有很多路要走。这里有两个例子：

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';
    }
  }
}

正如我所说，有很多方法可以做到这一点，这取决于你的架构和你想要实现的目标。

您可以使用ng-include，然后根据键盘变量返回正确的html模板。

例如：

vm.GetKeyboardTemplate = function(keyboard){return keyboard + ".html";}
<div ng-include="{{vm.GetKeyboardTemplate(item.keyboard);}}"></div>
相关文章：