如何在ng中获取不同的ng-model值 - 包括相同的HTML文件

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