2

围绕这个已经有一段时间了；基本上我有一个打开 ngDialog 的指令，该指令需要能够从根范围中获取一个变量。该指令基本上有一个单击事件，该事件会打开一个 ngDialog，然后该 ngDialog 使用传入的值并将其设置为文本框的文本......一旦 ngDialog 中的文本框被更新，它应该反映根范围的更改。

我的问题传入的值没有链接到根范围，一旦在 ngDialog 中更新值，它就不会反映回根范围我很确定我只是犯了一个基本错误，有人可以帮忙吗？

//HTML

<b>Instructions: </b>Click on the blue items to open ngDialog<br /><br />
<div ng-controller="MyCtrl">
    <b>Base $scope.variable1 = </b> {{variable1}}
    <span pass-object passed-object="variable1"></span><br />
    <b>Base $scope.variable2 = </b> {{variable2}}
    <span pass-object passed-object="variable2"></span><br />
    <b>Base $scope.variable3 = </b> {{variable3}}
    <span pass-object passed-object="variable3"></span><br />
</div>

//Js

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

myApp.controller('MyCtrl', function ($scope) {
    //Lets say i have 3 scope variables
    $scope.variable1 = "value 1";
    $scope.variable2 = "value 2";
    $scope.variable3 = "value 3";
});

//Now i want to create a directive that opens up a ngdialog, I need to be able to pass in a scope variable into this directive
//and from inside the ngDialog i need to be able to update the variable passed in, and have it reflect from the root scope.
myApp.directive('passObject', ['ngDialog', function(ngDialog) {
    return {
        restrict: 'A',
        scope: { passedObject: '=' },
        template: "<div class='directive'>This is the value passed into this directive = {{passedObject}}!</div>",
        link: function($scope, element){
            element.on('click',function(){
                ngDialog.open({
                    template: '<div>By updating i need it to reflect in the root scope:<br /><br />' + 
                              '<input type="text" ng-model="passedObject"/></div>',
                    plain: true,
                    scope: $scope,
                    controller: ['$scope', function($scope){
                        $scope.$watch('passedObject', function(passedObject){
                            //What do i need to do? it seems like the scope at this level is updating how come the parent is not?
                            alert('updated with: ' + passedObject);
                            $scope.$apply();
                        });
                    }]
                })
            });
        }
    };
}]);

//小提琴

http://jsfiddle.net/Egli/od8a2hL0/

//感谢 :D

提前致谢

4

1 回答 1

4

控制台说 $digest 已经在进行中，只需删除$scope.$apply();

http://jsfiddle.net/usmoetyd/

您必须使用对象而不是原始类型：

myApp.controller('MyCtrl', function ($scope) {
    //Lets say i have 3 scope variables
    $scope.variable1 =  { value : "value 1" };
    $scope.variable2 =  { value: "value 2" };
    $scope.variable3 =  { value: "value 3" };
});



//Now i want to create a directive that opens up a ngdialog, I need to be able to pass in a scope variable into this directive
//and from inside the ngDialog i need to be able to update the variable passed in from the root scope.
myApp.directive('passObject', ['ngDialog', function(ngDialog) {
    return {
        restrict: 'A',
        scope: { passedObject: '=' },
        template: "<div class='directive'>This is the value passed into this directive = {{passedObject.value}}!</div>",
        link: function($scope, element){             


            element.on('click',function(){             


                ngDialog.open({
                    template: '<div>By updating i need it to reflect in the root scope:<br /><br />' + 
                              '<input type="text" ng-model="passedObject.value"/></div>',
                    plain: true,
                    scope: $scope,
                    controller: ['$scope', function($scope){
                        $scope.$watch('passedObject', function(passedObject){
                            //What do i need to do? it seems like the scope at this level is updating how come the parent is not?
                            console.log(passedObject);                                
                        });

                    }]
                })

            });
        }
    };
}]);

http://jsfiddle.net/jyk6Lbwe/1/

阅读此问题以获取详细说明：AngularJS 中范围原型/原型继承的细微差别是什么？

于 2014-10-15T06:01:23.883 回答