Javascript Angularjs:ngDialog仅绑定和修改对象；不是基本变量。

我已经找到了这个问题的“解决方案”；我只是希望有人能提供一个理由说明它为什么有效

此JSFIDLE演示了问题：

HTML

{{accountNum}}

安格拉斯

var myApplication = angular.module('myApplication', ['ngDialog']);

myApplication.controller('MainController', function ($scope, ngDialog) {
    $scope.accountNum = 'test';
    $scope.ShowNgDialog = function () {
        ngDialog.open({            
            template: '<div><input type="text" ng-model="accountNum"/></div>',
            plain: true,
            scope:$scope

        });
    }    
});

var myApplication = angular.module('myApplication', ['ngDialog']);

myApplication.controller('MainController', function ($scope, ngDialog) {
    $scope.FormData={accountNum: ''};
    $scope.ShowNgDialog = function () {
        ngDialog.open({            
            template: '<div><input type="text" ng-model="FormData.accountNum"/></div>',
            plain: true,
            scope:$scope

        });
    }    
});

var myApplication=angular.module（'myApplication'，['ngDialog']）；
myApplication.controller（'MainController'，函数（$scope，ngDialog）{
$scope.accountNum='test'；
$scope.ShowNgDialog=函数（）{
ngDialog.open（{
模板：“”，
朴素：没错，
范围：$scope
});
}    
});

当我尝试从对话框中操作一个scope变量（在本例中：$scope.accountNum='test'）时，它不会将其绑定/保存回模型

…但是，当我将该变量更改为对象时，一切都会神奇地工作，如本演示所示：

HTML

{{FormData.accountNum}

安格拉斯

var myApplication = angular.module('myApplication', ['ngDialog']);

myApplication.controller('MainController', function ($scope, ngDialog) {
    $scope.accountNum = 'test';
    $scope.ShowNgDialog = function () {
        ngDialog.open({            
            template: '<div><input type="text" ng-model="accountNum"/></div>',
            plain: true,
            scope:$scope

        });
    }    
});

var myApplication = angular.module('myApplication', ['ngDialog']);

myApplication.controller('MainController', function ($scope, ngDialog) {
    $scope.FormData={accountNum: ''};
    $scope.ShowNgDialog = function () {
        ngDialog.open({            
            template: '<div><input type="text" ng-model="FormData.accountNum"/></div>',
            plain: true,
            scope:$scope

        });
    }    
});

var myApplication=angular.module（'myApplication'，['ngDialog']）；
myApplication.controller（'MainController'，函数（$scope，ngDialog）{
$scope.FormData={accountNum:''}；
$scope.ShowNgDialog=函数（）{
ngDialog.open（{
模板：“”，
朴素：没错，
范围：$scope
});
}    
});

除了尝试ngDialog.openConfirm等功能外，我还使用链接到文件的模板测试了这两个选项，而不是使用plain:true。我基本上是逐块重建了这里找到的解决方案，最后唯一有效的更改似乎是使用对象而不是基本范围变量。

---

我的做法是错误的，还是遗漏了数据绑定的一些基本方面？

我认为这与绑定无关。当我深入研究和的代码时，我会解释我理解了什么

我认为第一个案例没有像您预期的那样工作，因为

$scope.accountNum='test'

是一个简单的字符串，它是一种基本类型，是不可变的（），或者换句话说是不可变的：

Mutable是一种可以更改的变量类型。在JavaScript中，只有 对象和数组是可变的，不是基本值。 （可以使变量名指向新值，但前一个 值仍保留在内存中。因此需要进行垃圾收集。）

可变对象是一个状态可以在更改后修改的对象 创建

不可变的对象是一旦 对象已创建。

字符串和数字是不可变的。

因此，简而言之，这就是为什么第一个变体不能按您所希望的方式工作的原因：）

---

现在让我们看看ngDialog的代码，它是方法的一部分：

在您的情况下，我们正在调用

options.scope.$new（）

，因为您在打开对话框时在选项中指定了

scope

现在让我们来检查角度代码：

$new: function (isolate, parent) {
    var child;  
    parent = parent || this;

    if (isolate) {
        child = new Scope();
        child.$root = this.$root;
    } else {
        if (!this.$$ChildScope) {
            this.$$ChildScope = createChildScopeClass(this); // <---- WE ARE COMING HERE NOW
        }
        child = new this.$$ChildScope();
    }
    ...

---

对我来说，有效的方法是在基本控制器中创建一个函数，并从ngDialog控制器调用该函数

例：

myApplication.controller（'MainController'，函数（$scope，ngDialog）{
$scope.accountNum='test'；
$scope.ShowNgDialog=函数（）{
ngDialog.open（{
模板：“”，
朴素：没错，
范围：$scope，
控制器：[“$scope”，
职能（$范围）{
$scope.updateVar（）；
}]
});
};
$scope.updateVar=函数（）{
$scope.accountNum=“已更改”；
}
});

我认为这可以回答您的问题，因为它与双向绑定有关。

$new: function (isolate, parent) {
    var child;  
    parent = parent || this;

    if (isolate) {
        child = new Scope();
        child.$root = this.$root;
    } else {
        if (!this.$$ChildScope) {
            this.$$ChildScope = createChildScopeClass(this); // <---- WE ARE COMING HERE NOW
        }
        child = new this.$$ChildScope();
    }
    ...

function createChildScopeClass(parent) {
    function ChildScope() {
        this.$$watchers = this.$$nextSibling =
                this.$$childHead = this.$$childTail = null;
        this.$$listeners = {};
        this.$$listenerCount = {};
        this.$$watchersCount = 0;
        this.$id = nextUid();
        this.$$ChildScope = null;
    }
    ChildScope.prototype = parent; /* <--- They simply assign the derived scope 
     as prototype of the new one (which is going to be the scope of the ngDialog) */
    return ChildScope;
}

myApplication.controller('MainController', function ($scope, ngDialog) {
    $scope.accountNum = 'test';
    $scope.ShowNgDialog = function () {
        ngDialog.open({            
            template: '<div><input type="text" ng-model="accountNum"/></div>',
            plain: true,
            scope:$scope,
            controller: ['$scope',
                function ($scope) {
                    $scope.updateVar();
                }]
        });
    };

    $scope.updateVar = function(){
        $scope.accountNum = "changed";
    }
});