我有一个应用程序控制器,负责将用户添加到另一个模型。在我的应用程序中添加用户有两种方法。我们可以通过选择用户自己来添加它们,或者通过选择整个组来添加该组的所有用户。
为了使 UI 更友好一点,我认为最好有标签来单独和通过组添加用户......这样我就不必同时显示两个表单 - 用户可以翻转使用选项卡在表单之间。
为了实现选项卡,我使用了 Angular 指令,因为我在应用程序的其他地方使用了这些选项卡。这是向您展示如何实现选项卡的 html 代码:
<tabs class="tabsContainer">
<tab-pane title="Users" class="users">
<form name="usersForm" ng-submit="addUsers()">
<label>Select Users Here:</label>
<select name="selectedUsers" ng-model="selectedUsers"
multiple="true" ng-multiple="true"
ng-options="user.id as user.fullName for user in users">
</select>
<button type="submit">Add Users</button>
</form>
</tab-pane>
<tab-pane title="User Groups" class="userGroups">
<form name="userGroupForm" ng-submit="addUserGroups()">
<label>Select Groups Here:</label>
<select name="selectedUserGroups" ng-model="selectedUserGroups"
multiple="true" ng-multiple="true"
ng-options="userGroup.id as userGroup.name for userGroup in userGroups">
</select>
<button type="submit">Add User Groups</button>
</form>
</tab-pane>
</tabs>
在这个 HTML 的控制器中,我很想访问 和的tab-pane
ng-model 值。我原以为由于它们被定义为嵌入,所以范围将是应用程序的控制器本身,但我认为范围值实际上是在指令的范围内。这意味着在我的主应用程序控制器中,并没有定义。selectedUsers
selectedUserGroups
tab-pane
$scope.selectedUsers
$scope.selectedUserGroups
如果我暂时删除tabs
andtab-pane
指令,主控制器中的一切都会正常工作。所以我认为ng-model
当这些指令被嵌入到tab-pane
.
我如何访问它?