javascript - ngDialogモーダルで行われた変更をメインページに表示する方法

Question

私は AngularJs とngDialogの両方が初めてで、 ngDialog モーダルとコントローラーの間でバインディングを機能させるのに問題があります。を指定してコントローラーのスコープをモーダルに挿入し{ scope: $scope }ました。コントローラーで定義されたメソッドにアクセスできますが、コントローラーで定義されたモデルへのバインディングが正しく機能していません。

モーダルを使用して、ユーザーがアドレスを組織に追加できるようにしようとしています。

ここにmain.jsがあります

var App = angular.module('App', ['ngRoute', 'ngCookies', 'ngDialog']);

...

App.controller('PageOrganization', function($scope, $rootScope, ngDialog, $route, $location){
    $scope.addAddressFormData = {};

    $scope.addAddress = function(){
        ngDialog.open({
            template: 'partials/modals/add-address.html',
            controller: 'PageOrganization',
            scope: $scope
        });
    };

    $scope.saveAddress = function(){
        console.log($scope.addAddressFormData);
        $scope.organization.addresses.push($scope.addAddressFormData);
        console.log($scope.organization);
    };

    // STUBBED OUT ORGANIZATION
    $scope.organization = {
        org_type: "nonprofit",
        name: 'New Organization',
        addresses: [],
        phoneNumber: "",
        faxNumber: "",
        emailAddress: "",
        website: "",
        primaryContact: "",
        primaryEmail: "",
        imageUrl: "",
        isPrivate: false,
        campaigns: [],
        admins: []
    };

これが organization.html です。

...

<button ng-click="addAddress()">Add an Address</button>
<h1>Addresses</h1>
<ul>
    <li ng-repeat="address in organization.addresses">
        <p>
            {{address.type}} <br>
            {{address.addressLine1}} <br>
            {{address.addressLine2}} <br>
            {{address.city}} <br>
            {{address.state}} <br>
            {{address.postalCode}}
        </p>
    </li>
  </ul>

add-address.html は次のとおりです。

<h1>Add an Address</h1>
<form ng-submit="saveAddress()">
    <select name="type">
        <option value="business" default="selected">Business</option>
        <option value="residence">Residence</option>
    </select>
    <input ng-model="addAddressFormData.addressLine1" type="text" placeholder="Address Line 1">
    <input ng-model="addAddressFormData.addressLine2" type="text" placeholder="Address Line 2">
    <input ng-model="addAddressFormData.city" type="text" placeholder="City"> 
    <select ng-model="addAddressFormData.state">
       <option value="AL">Alabama</option>
       <option value="AK">Alaska</option>
       <option value="AZ">Arizona</option>
       <option value="AR">Arkansas</option>
       <option value="CA">California</option>
       <option value="CO">Colorado</option>
       <option value="CT">Connecticut</option>
       <option value="DE">Delaware</option>
       <option value="DC">District Of Columbia</option>
       <option value="FL">Florida</option>
       <option value="GA">Georgia</option>
       <option value="HI">Hawaii</option>
       <option value="ID">Idaho</option>
       <option value="IL">Illinois</option>
       <option value="IN">Indiana</option>
       <option value="IA">Iowa</option>
       <option value="KS">Kansas</option>
       <option value="KY">Kentucky</option>
       <option value="LA">Louisiana</option>
       <option value="ME">Maine</option>
       <option value="MD">Maryland</option>
       <option value="MA">Massachusetts</option>
       <option value="MI">Michigan</option>
       <option value="MN">Minnesota</option>
       <option value="MS">Mississippi</option>
       <option value="MO">Missouri</option>
       <option value="MT">Montana</option>
       <option value="NE">Nebraska</option>
       <option value="NV">Nevada</option>
       <option value="NH">New Hampshire</option>
       <option value="NJ">New Jersey</option>
       <option value="NM">New Mexico</option>
       <option value="NY">New York</option>
       <option value="NC">North Carolina</option>
       <option value="ND">North Dakota</option>
       <option value="OH">Ohio</option>
       <option value="OK">Oklahoma</option>
       <option value="OR">Oregon</option>
       <option value="PA">Pennsylvania</option>
       <option value="RI">Rhode Island</option>
       <option value="SC">South Carolina</option>
       <option value="SD">South Dakota</option>
       <option value="TN">Tennessee</option>
       <option value="TX">Texas</option>
       <option value="UT">Utah</option>
       <option value="VT">Vermont</option>
       <option value="VA">Virginia</option>
       <option value="WA">Washington</option>
       <option value="WV">West Virginia</option>
       <option value="WI">Wisconsin</option>
       <option value="WY">Wyoming</option>
    </select>
    <input ng-model="addAddressFormData.postalCode" type="text" placeholder="Postal Code"> 
    <input type="submit" value="Save Address">
</form>

モーダルは親スコープにアクセスできます。モーダルに追加された新しいアドレスを含め、組織全体を正常に呼び出し$scope.saveAddress()てログに記録します。console.log($scope.organization)しかし、新しいアドレスはng-repeatorganization.htmlに反映されず、複数のアドレスを次々と追加すると、ログには最新のものしか表示されません。

実験として、この関数を main.js に追加しました。

$scope.pushAddress = function(){
    $scope.addAddressFormData = {city: $scope.organization.addresses.length + 1};
    console.log($scope.addAddressFormData);
    $scope.organization.addresses.push($scope.addAddressFormData);
    console.log($scope.organization);
};

一致するように organization.html の [アドレスの追加] ボタンを変更しました。

<button class="button color-c vertical-a float-right" ng-click="pushAddress()">Add an Address</button>

[Add an Address] をクリックすると、新しいアドレスがすぐにに表示され、ng-repeat各コンソールログには、最新のアドレスだけでなく、すべてのアドレスが含まれます。

これら2つの方法の違いは何ですか? コントローラーのスコープ内のメソッドを使用して変更が行われたときに、モーダルで行われた変更が「期限切れ」になるのはなぜですか?

score 24 · Accepted Answer

controllerに引数を渡さないでくださいngDialog.open。これを行うと、ダイアログのそのインスタンスに対して新しいコントローラーが作成されるため、「機能している」ことがわかります。$scope渡すものではなく、他のコントローラーインスタンスのスコープと変数にアクセスしています。

したがって、開いているダイアログコードを次のように変更するだけで機能します。

$scope.addAddress = function(){
    ngDialog.open({
        template: 'partials/modals/add-address.html',
        scope: $scope
    });
};

これが私が作成した実用的なプランカーです。

javascript - ngDialogモーダルで行われた変更をメインページに表示する方法

1 に答える 1

Related

Reference