如何指定模式在AngularJS一个ngInclude指令？ [英] How to specify model to a ngInclude directive in AngularJS?

问题描述

我想使用相同的HTML模板在3个地方，只是每次都使用不同的模型。
我知道我可以从模板访问的变量，但名称将是不同的。

有没有办法通过一个模型来ngInclude？

这是我想实现，当然属性添加变量现在无法正常工作的。然后在我的包含的模板，我会存取权限的detailsObject及其属性。

 ＆LT;面板标题={{projectSummary.ProjectResults.DisplayName}}＆GT;
    ＆LT; H2＆GT; {{projectSummary.ProjectResults.DisplayName}}＆LT; / H＆GT;
    ＆LT; NG-包括SRC =局部模板/ SummaryDetails.html'初始化变量={'detailsObject'：projectSummary.ProjectResults}＆GT;＆LT; / NG-包括＆GT;
＆LT; /窗格＆GT;＆LT;面板标题=文档标题=真正的＆GT;＆LT; /窗格＆GT;＆LT;面板NG重复=文件中projectSummary.DocumentResults称号={{document.DisplayName}}＆GT;
    ＆LT; H2＆GT; {{document.DisplayName}}＆LT; / H＆GT;
    ＆LT; NG-包括SRC =局部模板/ SummaryDetails.html'添加变量={'detailsObject：文件}＆GT;＆LT; / NG-包括＆GT;
＆LT; /窗格＆GT;＆LT;面板NG重复=标题=语言标题=真正的＆GT[1]的头;＆LT; /窗格＆GT;＆LT;面板NG重复=标题={{language.DisplayName}}＆GT在projectSummary.ResultsByLanguagePairs语言;
    ＆LT; H2＆GT; {{document.DisplayName}}＆LT; / H＆GT;
    ＆LT; NG-包括SRC =局部模板/ SummaryDetails.html'添加变量={'detailsObject：语言}＆GT;＆LT; / NG-包括＆GT;
＆LT; /窗格＆GT;
 

如果我参加了一个不错的办法用NG-包括，有没有别的东西，我应该尝试？

解决方案

注意：这不是我原来的答案，但我这是怎么会采用了棱角分明的后位做到这一点

在这个小提琴。

步骤/这个例子说明：

1. 定义一个指令与在 templateUrl 和属性用于​​将数据传递到指令（名为输入（S）在这个例子中）。


2. 使用指令数据模板（名为键入在这个例子中）。


3. 当使用标记指令确保你从控制器范围的数据传递给指令（＆LT;地址表单类型=计费＆GT;＆LT; /地址形式＆GT; （其中计费是在访问控制器范围内的对象）。


4. 请注意，定义一个指令的名称是骆驼套管，但在标记使用时，它是分隔的小写字符（即它的命名为AddressForm 在js的时候，但地址形式在html）。更多的相关信息可以在这里角文档被发现。

下面是JS：

  VAR对myApp = angular.module（'对myApp'，[]）;angular.module（'对myApp'）。指令（为AddressForm'，函数（）{
    返回{
        限制：'E'，
        templateUrl：'谐音/ addressform.html'，//为模板标记
        范围： {
            类型：'='//允许将数据从控制器范围传递到指令
        }
    };
}）;angular.module（'对myApp'）。控制器（'MyCtrl'，函数（$范围）{
    得到数据传递给该指令的控制器范围//样本对象
    $ scope.billing = {类型：收费类型，值：'ABC'};
    $ scope.delivery = {类型：传递类型'，值：'高清'};
}）;
 

使用标记：

 ＆LT; D​​IV NG控制器=MyCtrl＆GT;
    ＆LT;地址表单类型=计费＆GT;＆LT; /地址形式＆GT;
    ＆LT;地址表单类型=交货＆GT;＆LT; /地址形式＆GT;
＆LT; / DIV＆GT;
 

---

原来的答案（这是比使用BTW指令完全不同）。

请注意：从我下面原来的答复小提琴似乎并没有工作了，由于错误（但在这里保持它的情况下，它仍然是有用的）

有大约这对谷歌集团的讨论，你可以看到这里。

看起来这个功能不支持开箱即用，但你可以使用布莱斯的补丁如这个帖子。

下面是从样本code他的jsfiddle ：

 ＆LT;脚本ID =谐音/ addressform.html类型=文/ NG-模板＆GT;
    部分类型{{}型}＆LT的; BR＆GT;
＆LT; / SCRIPT＆GT;＆LT; D​​IV NG控制器=MyCtrl＆GT;
  ＆LT; NG-包括SRC ='谐音/ addressform.html'onInclude =类型='账单'＆GT;＆LT; / NG-包括＆GT;
  ＆LT; NG-包括SRC ='谐音/ addressform.html'的onLoad =类型='交货'＆GT;＆LT; / NG-包括＆GT;
＆LT; / DIV＆GT;
 

I would like to use the same HTML template in 3 places, just each time with a different model. I know I can access the variables from the template, but there names will be different.

Is there a way to pass a model to the ngInclude?

This is what I would like to achieve, of course the attribute add-variable does not work now. Then in my included template, I would acces the detailsObject and its properties.

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

If I took a bad approach with using ng-include, is there something else I should try?

解决方案

NOTE: this is not my original answer but this is how I'd do this after using angular for a bit.

I would create a directive with the html template as the markup passing in the dynamic data to the directive as seen in this fiddle.

Steps/notes for this example:

1. Define a directive with markup in the templateUrl and attribute(s) used to pass data into the directive (named type in this example).
2. Use the directive data in the template (named type in this example).
3. When using the directive in the markup make sure you pass in the data from the controller scope to the directive (<address-form type="billing"></address-form> (where billing is accessing an object on the controller scope).
4. Note that when defining a directive the name is camel cased but when used in the markup it is lower case dash delimited (ie it's named addressForm in the js but address-form in the html). More info on this can be found in the angular docs here.

Here is the 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' };
});

With markup:

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

---

ORIGINAL ANSWER (which is completely different than using a directive BTW).

Note: The fiddle from my original answer below doesn't appear to work anymore due to an error (but keeping it here in case it is still useful)

There was a discussion about this on the Google Group you can see it here.

It looks like this functionality is not supported out of the box but you can use Brice's patch as described in this post.

Here is the sample code from his 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>

这篇关于如何指定模式在AngularJS一个ngInclude指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！