Angular에서 정의된 text/ng-template를 사용하는 방법JS 지시어

Angular에서 정의된 text/ng-template를 사용하는 방법JS 지시어

나는 매우 유연한 지시문을 쓰려고 노력한다.이를 위해 사용자가 (ui-bootstrap autoahead 디렉티브에서 보듯이) 반환의 일부에 사용되는 템플릿을 정의해 주었으면 합니다.

템플릿을 다음과 같이 정의합니다.

<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 is not defined에러 스코프 없이 호출하면ReferenceError: myDirectiveCustomTemplate is not defined에러

반품용으로만 사용하고 싶지 않은 경우 템플릿을 어디에 어떻게 사용할 수 있습니까?

편집: 예를 들어 다음과 같습니다.

(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]);
})();

HTML

<script type="text/ng-template" id="myDirectivesCustomTemplate.html">
    <ul>
        <li ng-repeat="value in values">
        <a ng-click="doSomething({id:value.id})">
                            {{value.name}}
        </a>
        </li>
    </ul>
</script>
<div ng-controller="MainCtrl">
     <div my-directive template="myDirectivesCustomTemplate.html" mydata="mydata" mycallback="doSomething(id)"></div>
</div>

JS

app.controller('MainCtrl',function($scope){
    $scope.mydata = [{id:1,name:'One'},{id:2,name:'Two'},{id:3,name:'Three'}];
    $scope.doSomething = function(id){
        alert(id); 
    }
});
app.directive('myDirective', function($templateCache,$compile) {
    return {
        restrict: 'A',
        scope:{
            template : "@",
            mydata : "=",
            mycallback:"&"
        },
        link: function(scope,element) {
            var template = $templateCache.get(scope.template);
            scope.values = scope.mydata;
            scope.doSomething = scope.mycallback;
            element.append($compile(template)(scope));
        }
    }
});

당신의 지시사항을 보면 시도해 볼 수 있습니다.ng-include하고 싶은 일

//$compile(ComboboxDropdownTemplate) +

    '</div>'

로 변경하다

<span ng-include='templateUrlPropertyOnScope'>

'</div>'

templateUrlPropertyOnScope속성은 서버 측 또는 에서 작성한 스크립트 섹션에 있는 템플릿을 가리켜야 합니다.type=text/ng-template.

이것이 4년 후라는 것을 알지만, 만약 누군가가 여전히 이 질문을 가지고 있다면, 아마도 이 답변도 도움이 될 것입니다.

다음과 같은 간단한 지시로:

<my-directive template="custom-template.html"></my-directive>

그런 다음 다음과 같이 지시문의 템플릿 속성을 참조할 수 있습니다.

(function() {
  angular
    .module('app')
    .directive('myDirective', myDirective);

  function myDirective() {
    return {
      restrict: 'E',
      templateUrl: function(elem, attrs) {
        return attrs.template;
      }
    }
  }
}

사용할 수 있습니다.$http그리고.$compile그런 임무를 완수하기 위해서요.

app.directive('myDirective', function($http, $templateCache, $compile) {
  return {
    scope: {
      // reference to your data. 
      // Just use `data.values` or `data.whatever` in your template
      data: '=myDirectiveData'
    },
    link: function(scope, elm, attrs) {
      // Load the template via my-directive-custom-template attribute
      $http.get(attrs.myDirectiveCustomTemplate, {cache: $templateCache}).success(function(html) {
        // update the HTML
        elm.html(html);
        // compile the html against the scope
        return $compile(elm.contents())(scope);
      });
    }
  };
});

좋은 출발이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/22757581/how-to-use-defined-text-ng-template-in-angularjs-directive