如何在同一 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" 代替表单 "Journalist's Details:" 部分的 "model.Name" 和 "Companion.Name" 代替 "model.Name"对于“记者的同伴”详细信息： " 部分，因为使用相同的型号名称只会在名称字段和任何其他字段中获得相同的值。

Answer 1

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

Answer 2

如果您使用的是 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>

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

How to get different ng-model values in ng-include of the same HTML file

html

angularjs

angularjs-directive

angularjs-ng-include

angularjs-ng-model