如何使用AngularJS指令定义的文本/ NG-模板 [英] How to use defined text/ng-template in AngularJS directive

问题描述

我试着写了一个非常灵活的指令。这样做，我想用户定义在我回来一部分使用（如 UI的引导预输入见过一个模板指令）。

所以我定义我的模板是这样的：

 ＆LT;脚本类型=文/ NG-模板ID =myDirectivesCustomTemplate.html＆GT;
  ＆LT; UL＆GT;
    ＆LT;李NG重复=价值观的价值＆GT;
      ＆LT;一个NG点击=DoSomething的（value.id）＆GT;
        {{value.name}}
      ＆所述; / A＆GT;
    ＆LT; /李＆GT;
  ＆LT; / UL＆GT;
＆LT; / SCRIPT＆GT;
 

我在指令设置此模板

 ＆LT; D​​IV
  我的指导性
  我-指令定制模板=myDirectivesCustomTemplate.html
  我的指导性数据=someScopeData＆GT;
 

在我的指令现在，我怎么能呈现自定义模板，并与传递的数据使用它呢？当我尝试使用它的模板直接返回它抛出一个的ReferenceError：$范围没有定义错误。如果我把它叫做没有范围，它说的ReferenceError：myDirectiveCustomTemplate没有定义错误

在哪里以及如何使用我的模板，如果我不只是想使用它作为一个直接的回报？

编辑：让我们说，这是我的指令：

 （函数（）{
 使用严格的;
 VAR组合框=功能（）{  变种displayInputField = elem.find（'input.dropdown'）;  范围。$腕表（scope.nsdComboboxModel，功能（的newval）{
    / *在给定数据对象*搜索的newval /
    scope.setDisplayInputValue（的newval）;
  }）;  scope.setDisplayInputValue =功能（值）
  {
    displayInputField.val（值）;
  };  scope.elementSelected =函数（项目，型号，标签）{
    scope.ComboboxCallback（项目）;
    scope.setDisplayInputValue（标签）;
  };
 }
 返回{
   限制：'A'，
   transclude：真实，
   范围： {
     组合框：'@'，/ *作为HTML / CSS-ID /名称/路径* /
     ComboBoxModel中：'='，/ *实际AngularJS模型（NG-模式）* /
     ComboboxAutocompleteData：'='，/ *用于自动完成（必须是具有ID和值对象的数组）中的数据* /
     ComboboxDropdownData：'='，/ *由下拉菜单模板*使用的数据/
     ComboboxCallback：'='，/ *调用选定自动完成数据项上选择*一个回调函数/
     ComboboxLabel：'@'，/ *标签输入字段* /
     ComboboxDropdownTemplate：'@'/ *标签输入字段* /
 }， 模板：  ＆lt;节类= - 组合框指示性容器流体＆GT;' +
    '＆LT;标签={{组合框}}NG-IF =ComboboxTranslation翻译={{ComboboxLabel}}＆GT;＆LT; /标签＆gt; +
    '＆LT; D​​IV CLASS =组合框中输入组＆GT;' +
      '＆LT;输入类型=文本+
        'ID ={{组合框}}'+
        自动完成=关闭'+
        'NG模型=ComboboxDestinationDisplay'+
        数据切换=下拉菜单'+
        预输入=值location.value在ComboboxAutocompleteData位置|过滤器：$ viewValue'+
        预输入编辑=假'+
        预输入上，选择=elementSelected（$项目，$模式，$标签）'+
        '类=的形式控制下拉＆GT;' + //下拉菜单，切换        '＆LT;跨度数据切换=下拉菜单级=输入组插件下拉拨动＆GT;' +
          '＆LT;跨度类=glyphicon glyphicon-地球＆GT;＆LT; / SPAN＆GT;' +
        '＆LT; / SPAN＆GT;' +        // $编译（ComboboxDropdownTemplate）+    '＆LT; / DIV＆GT;' +
  '＆LT; /节＆gt;，  链接：链接
 };
};。angular.module（'vibe.directives'）指令（nsdCombobox'，[NsdCombobox]）;
}）（）;
 

解决方案

看你的指令，我可以建议尝试 NG-包括。要做到

  // $编译（ComboboxDropdownTemplate）+    '＆LT; / DIV＆GT;'
 

将其更改为

 ＆LT;跨度NG-包括='templateUrlPropertyOnScope'＆GT;'＆LT; / DIV＆GT;'
 

templateUrlPropertyOnScope 属性应指向一个模板，无论是在服务器端或与创建脚本部分类型=文本/ NG-模板。

I try to write a very flexible directive. For doing so i want the user to define a template used in part of my return (as seen in the ui-bootstrap typeahead directive).

So i define my template like this:

<script type="text/ng-template" id="myDirectivesCustomTemplate.html">
  <ul>
    <li ng-repeat="value in values">
      <a ng-click="doSomething(value.id)">
        {{value.name}}
      </a>
    </li>
  </ul>
</script>

I set this template in my directive

<div 
  my-directive 
  my-directive-custom-template="myDirectivesCustomTemplate.html" 
  my-directive-data="someScopeData">

Now in my directive, how can i render the custom template and use it with the passed data? When i try to use it to return in template directly it throws a ReferenceError: $scope is not defined Error. If i call it without scope, it says ReferenceError: myDirectiveCustomTemplate is not defined Error.

Where and how can i use my template if i do not just want to use it as a return directly?

EDIT: let's say, this is my directive:

(function() {
 'use strict';
 var Combobox = function() {

  var displayInputField     = elem.find('input.dropdown');

  scope.$watch(scope.nsdComboboxModel,function(newVal){
    /* search for newVal in given data object */
    scope.setDisplayInputValue(newVal);
  });

  scope.setDisplayInputValue = function(value)
  {
    displayInputField.val(value);
  };

  scope.elementSelected = function (item, model, label) {
    scope.ComboboxCallback(item);
    scope.setDisplayInputValue(label);
  };
 }


 return {
   restrict: 'A',
   transclude: true,
   scope: {
     Combobox:                  '@', /* used as HTML/CSS-id/name/path */
     ComboboxModel:             '=', /* the actual AngularJS model (ng-model) */
     ComboboxAutocompleteData:  '=', /* the data used for autoComplete (must be array of objects having id and value) */
     ComboboxDropdownData:      '=', /* data used by the dropdown template */
     ComboboxCallback:          '=', /* a callback function called with selected autocomplete data item on select */
     ComboboxLabel:             '@', /* label for the input field */
     ComboboxDropdownTemplate:  '@'  /* label for the input field */
 },

 template:

  '<section class="-combobox-directive container-fluid">' +
    '<label for="{{Combobox}}" ng-if="ComboboxTranslation" translate="{{ComboboxLabel}}"></label>' +
    '<div class="combobox input-group">' +
      '<input type="text" ' +
        'id="{{Combobox}}" ' +
        'autocomplete="off" ' +
        'ng-model="ComboboxDestinationDisplay" ' +
        'data-toggle="dropdown" ' +
        'typeahead="value as location.value for location in ComboboxAutocompleteData | filter:$viewValue" ' +
        'typeahead-editable="false" ' +
        'typeahead-on-select="elementSelected($item, $model, $label)" ' +
        'class="form-control dropdown">' + // dropdown-toggle

        '<span data-toggle="dropdown" class="input-group-addon dropdown-toggle">' +
          '<span class="glyphicon glyphicon-globe"></span>' +
        '</span>' +

        //$compile(ComboboxDropdownTemplate) +

    '</div>' +
  '</section>',

  link: link
 };
};

angular.module('vibe.directives').directive('nsdCombobox', [NsdCombobox]);
})();

解决方案

Looking at your directive i can suggest try ng-include. Where you want to do

//$compile(ComboboxDropdownTemplate) +

    '</div>'

change it to

<span ng-include='templateUrlPropertyOnScope'>

'</div>'

templateUrlPropertyOnScope property should point to a template either on server side or in script section created with type=text/ng-template.

这篇关于如何使用AngularJS指令定义的文本/ NG-模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！