加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

如何在AngularJS指令中使用定义的文本/ ng模板

发布时间:2020-12-17 08:11:39 所属栏目:安全 来源:网络整理
导读:我试图写一个非常灵活的指令。为了做到这一点,我希望用户定义一个在我的返回部分使用的模板(如 ui-bootstrap typeahead directive所示)。 所以我定义我的模板像这样: script type="text/ng-template" id="myDirectivesCustomTemplate.html" ul li ng-repea
我试图写一个非常灵活的指令。为了做到这一点,我希望用户定义一个在我的返回部分使用的模板(如 ui-bootstrap typeahead directive所示)。

所以我定义我的模板像这样:

<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>

我将此模板设置为我的指令

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

现在在我的指令中,我如何渲染自定义模板并使用传递的数据?当我尝试使用它直接返回模板时会抛出一个ReferenceError:$ scope未定义Error。如果我没有范围调用它,它会引用ReferenceError:myDirectiveCustomTemplate未定义错误。

如果我不想直接使用它作为回报,我可以在哪里和如何使用我的模板?

编辑:让我们说,这是我的指示:

(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]);
})();
看你的指令,我可以建议尝试包含。你想做什么
//$compile(ComboboxDropdownTemplate) +

    '</div>'

把它改成

<span ng-include='templateUrlPropertyOnScope'>

'</div>'

templateUrlPropertyOnScope属性应指向服务器端或脚本部分中使用type = text / ng-template创建的模板。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读