我是新来的都AngularJs和 ngDialog 和我无法让我的绑定ngDialog模态之间的合作和我的控制器。我注入控制器的范围进入模式通过指定 {范围：$范围} ，我有机会到控制器中定义的方法，但绑定模型控制器进行定义不正常。

I'm new to both AngularJs and ngDialog, and I'm having trouble getting my bindings to work between the ngDialog modal and my controller. I injected the controller's scope into the modal by specifying { scope: $scope }, and I have access to methods defined in the controller, but the bindings to models defined in the controller aren't functioning properly.

我试图用一个模式来允许用户的地址添加到一个组织。

I'm trying to use a modal to allow the user to add an address to an organization.

下面是main.js

Here's 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：

Here's 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>

和这里的附加address.html：

And here's 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-重复在organization.html，如果我添加多个地址此起彼伏，只有最近的一次在日志中显示。

The modal has access to the parent scope; it successfully calls $scope.saveAddress() and console.log($scope.organization) logs the whole organization, including the new address added in the modal. However, the new address is not reflected in the ng-repeat in organization.html, and if I add multiple addresses one after another, only the most recent one shows in the log.

作为一个实验，我添加了这个功能main.js：

As an experiment, I added this function to 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匹配：

and changed the "Add Address" button in organization.html to match:

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

现在，当我点击添加地址，新的地址会立即显示在 NG-重复，每个控制台日志包含了所有的地址，而不仅仅是最近的一次。

Now when I click "Add an Address," the new address shows immediately in the ng-repeat, and each console log contains all of the addresses, not just the most recent one.

有什么这两种方法之间的区别？为什么改变了模式'到期'当他们使用控制器的范围方法制成的发？

What's the difference between these two methods? Why are the changes made in the modal 'expiring' when they were made using methods in the controller's scope?

推荐答案

不要控制器参数传递给 ngDialog.open 。当你这样做，是在对话框的该实例创建一个新的控制器，这就是为什么你看到了工作。它的访问范围，并且其他控制器实例变量，而不是一个在 $范围，你在传递

Don't pass the controller argument to ngDialog.open. When you do that, a new Controller is created for that instance of the dialog and that is why you see it "working". It's accessing the scope and variables of that other controller instance and not the one in the $scope that you pass in.

因此​​，只要改变你打开的对话​​框code这和它的工作：

So just change your open dialog code to this and it will work:

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

下面是我创建了一个工作plunker 。