AngularJS에서 ngInclude 지시문에 모델을 지정하는 방법은 무엇입니까?

AngularJS에서 ngInclude 지시문에 모델을 지정하는 방법은 무엇입니까?

같은 HTML 템플릿을 3군데서 매번 다른 기종으로 사용하고 싶습니다.템플릿에서 변수에 액세스할 수 있지만 이름이 다를 수 있습니다.

모델을 ngInclude에 넘기는 방법이 있나요?

이것이 제가 달성하고 싶은 것입니다.물론 add-variable 속성은 현재 동작하지 않습니다.그런 다음 포함된 템플릿에서 detailsObject와 해당 속성에 액세스합니다.

<pane title="{{projectSummary.ProjectResults.DisplayName}}">
    <h2>{{projectSummary.ProjectResults.DisplayName}}</h2>
    <ng-include src="'Partials/SummaryDetails.html'" init-variable="{'detailsObject': projectSummary.ProjectResults}"></ng-include>
</pane>

<pane  title="Documents" header="true"></pane>

<pane ng-repeat="document in projectSummary.DocumentResults" title="{{document.DisplayName}}">
    <h2>{{document.DisplayName}}</h2>
    <ng-include src="'Partials/SummaryDetails.html'" add-variable="{'detailsObject': document}"></ng-include>
</pane>

<pane ng-repeat="header in [1]" title="Languages" header="true"></pane>

<pane ng-repeat="language in projectSummary.ResultsByLanguagePairs" title="{{language.DisplayName}}">
    <h2>{{document.DisplayName}}</h2>
    <ng-include src="'Partials/SummaryDetails.html'" add-variable="{'detailsObject': language}"></ng-include>
</pane>

ng-include를 사용하여 잘못된 접근을 했을 경우, 다른 방법이 있습니까?

꽤 간단한 해결책이 있습니다. 하지만 미스코가 추천할 만한 해결책은 아닙니다.그러나 디렉티브를 작성하는 것이 당신에게 과잉이고 Brice의 패치를 취득할 수 없는 경우 다음 사항이 도움이 됩니다.

<div ng-repeat="name in ['A']" ng-include="'partial.html'"></div>
<div ng-repeat="name in ['B']" ng-include="'partial.html'"></div>

<script type="text/ng-template" id="partial.html">
   <div>{{ name }}</div>
</script>

왜 효과가 있는지는 아주 명백합니다.http://jsfiddle.net/Cndc6/4/ 의 예를 참조해 주세요.

메모: 이 답변은 원래 답변이 아닙니다만, 앵글을 조금 사용한 후 이렇게 하겠습니다.

이 바이올린에서 볼 수 있듯이 동적 데이터로 전달되는 마크업으로서 html 템플릿을 사용하여 디렉티브를 작성합니다.

이 예의 순서/주의:

1. 에서 마크업을 사용하여 디렉티브를 정의합니다.templateUrl및 Atribute(들)를 사용하여 데이터를 디렉티브(이름부여)에 전달합니다.type를 참조해 주세요).
2. 템플릿의 지시 데이터 사용(이름 지정)type를 참조해 주세요).
3. 마크업의 디렉티브를 사용할 때는 컨트롤러 스코프에서 디렉티브로 데이터를 전달해 주세요(<address-form type="billing"></address-form>(여기서 과금은 컨트롤러 스코프상의 오브젝트에 액세스 하는 것입니다).
4. 디렉티브를 정의할 때 이름은 camel case이지만 마크업에서 사용할 경우 소문자로 대시 구분됩니다(즉, 이름이 지정됨).addressFormjs는 그렇지만address-form를 참조해 주세요).이에 대한 자세한 내용은 각진 문서를 참조하십시오.

js는 다음과 같습니다.

var myApp = angular.module('myApp',[]);

angular.module('myApp').directive('addressForm', function() {
    return {
        restrict: 'E',
        templateUrl: 'partials/addressform.html', // markup for template
        scope: {
            type: '=' // allows data to be passed into directive from controller scope
        }
    };
});

angular.module('myApp').controller('MyCtrl', function($scope) {
    // sample objects in the controller scope that gets passed to the directive
    $scope.billing = { type: 'billing type', value: 'abc' };
    $scope.delivery = { type: 'delivery type', value: 'def' };
});

마크업 포함:

<div ng-controller="MyCtrl">
    <address-form type="billing"></address-form>
    <address-form type="delivery"></address-form>
</div>

---

원래 답변(지시적 BTW를 사용하는 것과는 완전히 다릅니다).

주의: 아래 답변의 바이올린은 오류로 인해 작동하지 않는 것 같습니다(단, 아직 도움이 될 수 있으므로 여기에 보관해 둡니다).

Google Group에서 이에 대한 토론이 있었습니다.여기서 보실 수 있습니다.

이 기능은 처음부터 지원되지 않는 것 같습니다만, 이 투고에서 설명한 바와 같이 Brice 패치를 사용할 수 있습니다.

다음은 그의 jsfiddle의 샘플 코드입니다.

<script id="partials/addressform.html" type="text/ng-template">
    partial of type {{type}}<br>
</script>

<div ng-controller="MyCtrl">
  <ng-include src="'partials/addressform.html'" onInclude="type='billing'"></ng-include>
  <ng-include src="'partials/addressform.html'" onLoad="type='delivery'"></ng-include>
</div>

이 문제를 해결할 수 있는 유인책이 있지만 이미 죽은 것 같습니다.https://github.com/angular/angular.js/pull/1227

Angular 소스 코드를 수정하지 않고 재사용 가능한 너무 해키하지 않은 느낌으로 문제를 해결할 수 있습니다.

directive('newScope', function() {
    return {
        scope: true,
        priority: 450,
    };
});

예를 들어 다음과 같습니다.

<div new-scope ng-init="myVar = 'one instance'" ng-include="'template.html'"></div>
<div new-scope ng-init="myVar = 'another instance'" ng-include="'template.html'"></div>

다음은 실천 중인 http://plnkr.co/edit/El8bIm8ta97MNRglfl3n에 대한 설명입니다.

<div new-scope="myVar = 'one instance'" ng-include="'template.html'"></div>

directive('newScope', function () {
    return {
        scope: true,
        priority: 450,
        compile: function () {
            return {
                pre: function (scope, element, attrs) {
                    scope.$eval(attrs.newScope);
                }
            };
        }
    };
});

는 '어리다'를 입니다.new-scope존 컬비너의 대답과 앵글의 코드로 부터ng-init

완전성을 위해, 이것은 Angular 1.2 26 ng-init 소스입니다.새로운 스코프 지시어의 유일한 변경은, 다음의 추가입니다.scope: true

{
  priority: 450,
  compile: function() {
    return {
      pre: function(scope, element, attrs) {
        scope.$eval(attrs.ngInit);
      }
    };
  }
}

퀵 앤 더티 솔루션:

<div ng-init="details=document||language||projectSummary.ProjectResults">

알겠습니다! ng-include는 글로벌 범위에 액세스할 수 있기 때문에 재사용할 수 없습니다.조금 이상하네요.

로컬 변수를 설정하는 방법이 있을 것입니다.ng-include 대신 새로운 디렉티브를 사용하는 것이 보다 깨끗한 솔루션입니다.

이상적인 사용법은 다음과 같습니다.

<div ng-include-template="'Partials/SummaryDetails.html'" ng-include-variables="{ 'detailsObject': language }"></div>

지시사항은 다음과 같습니다.

.directive(
  'ngIncludeTemplate'
  () ->
    {
      templateUrl: (elem, attrs) -> attrs.ngIncludeTemplate
      restrict: 'A'
      scope: {
        'ngIncludeVariables': '&'
      }
      link: (scope, elem, attrs) ->
        vars = scope.ngIncludeVariables()
        for key, value of vars
          scope[key] = value
    }
)

지시문이 글로벌스코프를 사용하지 않는 것을 알 수 있습니다.대신 ng-include-variables에서 개체를 읽고 해당 구성원을 자체 로컬 범위에 추가합니다.

깔끔하고 일반적입니다.

언급URL : https://stackoverflow.com/questions/13422966/how-to-specify-model-to-a-nginclude-directive-in-angularjs