如何在ng-包含同一个HTML文件中获得不同的ng模型值

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”作为“记者的详细信息：”表单的一部分，用"Companion.Name“代替”记者的陪伴详细信息：“部分，因为使用相同的模型名，只会在名称字段和任何其他字段中得到相同的值。

Answer 1

如果使用的是AngularJS v1.5+，则可以使用组件而不是ng-v1.5+。这是一个可以创建的组件的示例。

组件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中的index.html需要有类似于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