如何在 AngularJS 中为 ngInclude 指令指定模型? [英] How to specify model to a ngInclude directive in AngularJS?

问题描述

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

有没有办法将模型传递给 ngInclude?

这就是我想要实现的，当然属性 add-variable 现在不起作用.然后在我包含的模板中，我将访问 detailsObject 及其属性.

{{projectSummary.ProjectResults.DisplayName}}
<ng-include src="'Partials/SummaryDetails.html'" init-variable="{'detailsObject': projectSummary.ProjectResults}"></ng-include></窗格><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 ng-repeat="header in [1]" title="Languages" header="true"></pane><pane ng-repeat="projectSummary.ResultsByLanguagePairs 中的语言"title="{{language.DisplayName}}"><h2>{{document.DisplayName}}</h2><ng-include src="'Partials/SummaryDetails.html'" add-variable="{'detailsObject': language}"></ng-include></窗格>

如果我在使用 ng-include 时采取了不好的方法，还有什么我应该尝试的吗?

解决方案

注意:这不是我最初的答案，但这是我在使用 angular 一段时间后的做法.>

我将使用 html 模板创建一个指令，作为将动态数据传递给指令的标记，如 this fiddle.

此示例的步骤/注释:

1. 在templateUrl 中定义一个带有标记的指令和用于将数据传递到指令中的属性(在本例中名为type).
2. 使用模板中的指令数据(在本例中名为 type).
3. 在标记中使用指令时，请确保将数据从控制器作用域传递到指令 (<address-form type="billing"></address-form>(其中计费正在访问控制器范围内的对象).
4. 请注意，在定义指令时，名称是驼峰式的，但在标记中使用时，它是小写破折号分隔的(即，它在 js 中名为 addressForm，但在 address-form代码>在html中).可以在 此处 的 angular 文档中找到关于此的更多信息.

这里是js:

var myApp = angular.module('myApp',[]);angular.module('myApp').directive('addressForm', function() {返回 {限制:'E'，templateUrl: 'partials/addressform.html',//模板标记范围: {type: '='//允许数据从控制器范围传递到指令}};});angular.module('myApp').controller('MyCtrl', function($scope) {//控制器作用域中传递给指令的示例对象$scope.billing = { type: 'billing type', value: 'abc' };$scope.delivery = { type: 'delivery type', value: 'def' };});

带标记:

<address-form type="billing"></address-form><address-form type="delivery"></address-form>

<小时>

原始答案(与使用指令 BTW 完全不同).

注意:由于错误，下面我的原始答案中的小提琴似乎不再起作用(但将其保留在此处以防它仍然有用)

Google 网上论坛上对此进行了讨论，您可以在此处查看.

看起来此功能不支持开箱即用，但您可以使用 Brice 的补丁，如中所述这个帖子.

这是他的 jsfiddle 中的示例代码:

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

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