如何在同一 HTML 文件的 ng-include 中获取不同的 ng-model 值

Question

有两个html文件：

index1.html

<input type="text" ng-model="model.Name">
<!-- Some complex form !-->

index.html

<div>Journalist's Details:
    Name:<div ng-include="index1.html"></div>
</div>
<div ng-if="isCompanionNeeded">Journalist's Companion Details:
    Name:<div ng-include="index1.html"></div>
</div>

在这里，我想用“Journalist.Name”代替“model.Name”作为表格的“Journalist's Details:”部分，用“Companion.Name”代替“model.Name”作为表格“记者的同伴详情： " 部分，因为使用相同的模型名称只会在名称字段和任何其他字段中获得相同的值。

Answer 1

如果你使用 AngularJS v1.5+，你可以使用组件来代替 ng-include。这是您可以创建的组件示例

组件 JS

angular
    .module('app')
    .component('myDetailsComponent', {
        bindings: {
            data: '<'
        },
        controller: function () {
            // do whatever you need with your input here            
        },
        templateUrl: 'my-details.component.html'
    });

组件模板

<input type="text" ng-model="$ctrl.data.Name">

查看

<div>
    <p>Journalist's Details:</p>
    <my-details-component data="companion"></my-details-component>
</div>

编辑

如果您使用的是旧版本的 AngularJS，您可以使用指令复制相同的功能。例如：

指令 JS

angular
    .module('myDetailsDirective')
    .directive('myDetailsDirective', myDetailsDirective);


function myDetailsDirective() {

    return {
        restrict: 'E',
        scope: {
            data: '='
        },
        templateUrl: 'my-details.directive.html',
        link: function () {
            // do whatever you need with your input here   
        }
    };

}

指令模板

<input type="text" ng-model="data.Name">

查看

指令的用法与组件的情况完全相同：

<div>
    <p>Journalist's Details:</p>
    <my-details-directive data="companion"></my-details-directive>
</div>

Answer 2

index.html 中的ng-model 需要有类似companion.Name 的对象才能访问。

使用

创建一个名为 index2.html 的文件

<input type="text" ng-model="companion.Name">

并将其包含在您的 index.html 中

   <div>Journalist's Details:
       Name:<div ng-include="index1.html"></div>
   </div>
   <div ng-if="isCompanionNeeded">Journalist's Companion Details:
       Name:<div ng-include="index2.html"></div>
   </div