Попутный область применения-переменные нг-включают

Question

У меня есть веб-форму, которая содержит следующие два блока:

<div class="mm-FilterRow"> 
    <div>First Name:</div> 
    <div><i ng-hide="user.FirstName">Loading...</i><select ng-show="choices.FirstNames" ng-model="user.FirstName" ng-options="o as o for o in choices.FirstNames"></select></div> 
</div> 
<div class="mm-FilterRow"> 
    <div>Last Name:</div> 
    <div><i ng-hide="user.LastName">Loading...</i><select ng-show="choices.LastNames" ng-model="user.LastName" ng-options="o as o for o in choices.LastNames"></select></div> 
</div> 

Как вы можете видеть, единственное различие между этими двумя являются Scope-переменные "user.FirstName|user.LastName" и в варианты выбора «choices.FirstNames|choices.LastNames»

Потому что у меня есть около 10 див тех же структур, я хотел бы сделать что-то вроде: (Это псевдокод, нерабочий)

<div ng-include="singlerow.html" caption="First name" scopetarget="user.FirstName" scopeSource="choices.FirstNames"> 
<div ng-include="singlerow.html" caption="Last name" scopetarget="user.LastName" scopeSource="choices.LastNames"> 

Есть ли шанс достичь того, чего я хочу? Или мне нужно сохранить эти уродливые варианты копирования/вставки?

Answer 1

Это невозможно, в этом случае лучше использовать directives.

angular.module('DirectiveExample', []) 
 
.controller('Controller', ['$scope', function($scope) { 
 
    $scope.options = [1, 2, 3]; 
 
    $scope.field = "Test"; 
 
}]) 
 
.directive('singlerow', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: { 
 
     field: '=', 
 
     options: '=', 
 
    }, 
 
    templateUrl: '/singlerow.html' 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="DirectiveExample"> 
 
<script type="text/ng-template" id="/singlerow.html"> 
 
    <div class="mm-FilterRow"> 
 
    <div>Last Name:</div> 
 
    <div><i ng-hide="field">Loading...</i><select ng-show="options" ng-model="field" ng-options="o as o for o in options"></select></div> 
 
</div> 
 
</script> 
 

 
    <div ng-controller="Controller"> 
 
    <singlerow field="field" options="options"></singlerow> 
 
    </div> 
 
</div>