AngularJS兩種形式用於同一控制器

Question

我對angularjs代碼有疑問。 我有一個角色選擇以兩種模式復制：創建用戶和更改角色。 此選擇通過以下方式充滿了http調用：

<ui-select theme="bootstrap" style="width: 100%;"
    data-ng-model="newUser.role" required> 
    <ui-select-match placeholder="Select role">
       {{$select.selected.role}}
    </ui-select-match> 
    <ui-select-choices
       repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
       <span data-ng-bind="role.role"></span>
    </ui-select-choices>
</ui-select>

在角度上我有：

$http({
        method: 'GET',
        url: 'roles'
    }).then(function successCallback(response) {
        $scope.roles = response.data.result;
        // this callback will be called asynchronously
        // when the response is available
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });

因此，我將HTML代碼放入兩種模式的表單中。 在第一個中，create user一切正常，在第二個中，我不能使用其他data-ng-model，因為否則我會收到未定義的元素。 例如我有這個：

<form novalidate class="simple-form" name="newRoleForm">
    <!-- form start -->
    <div class="box-body">
        <div class="form-group">
            <label>New role</label>
            <!-- <ui-select theme="bootstrap" style="width: 100%;"
                data-ng-model="newRole.role" required> <ui-select-match
                placeholder="Select new role">
            {{$select.selected.role}}</ui-select-match> <ui-select-choices
                repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
            <span data-ng-bind="role.role"></span> </ui-select-choices> </ui-select> -->
            <ui-select theme="bootstrap" style="width: 100%;"
                data-ng-model="newUser.role" required> <ui-select-match
                placeholder="Select role">
            {{$select.selected.role}}</ui-select-match> <ui-select-choices
                repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
            <span data-ng-bind="role.role"></span> </ui-select-choices> </ui-select>
        </div>
    </div>
</form>

如果我使用注釋的代碼，則我的javascript中不會收到角色值；如果使用未注釋的代碼，則它會起作用，因為在其他模式中使用了newUser。 我可以使用此實際代碼，但我想了解為什么它可以工作，其他則不能。 此外，當我打開第二個模態時，我會看到第一個模態中設置的值。 你知道為什么嗎？

Answer 1

要獲得完美的概述，這有些棘手，但我想我會盡力回答您的幾個問題：

1. 為什么不newRole.role當工作newUser.role呢？

   基本上，您可以根據我的回答自己回答。 在開始將屬性綁定到對象之前，需要在范圍內的某個位置定義對象。 也就是說，在您的控制器中使用簡單的$scope.newRole = {}可能會解決此錯誤。

2. 第一個模態的值在第二個模態中設置？

   我對此不確定，因為我看不到第二個模態（？）。 但是，如果您在相同范圍內重用相同的代碼，則會將數據綁定到相同的newUser對象。 因此，每次都獲得相同的值。

我希望這可以有所幫助