Javascript Angularjs:在ngRepeat中传入属性时,如何在不使用隔离作用域的情况下更新指令中的父作用域

Javascript Angularjs:在ngRepeat中传入属性时,如何在不使用隔离作用域的情况下更新指令中的父作用域,javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Ng Repeat,我有一个简单的angularjs指令,它使用JQuery将模板转换为可拖动的对话框 var myApp = angular.module("myApp", []); myApp.controller('myCtrl', function ($scope) { $scope.tasks = [{ name: 'learn angular', show: false }, { name: 'build an angular app',

我有一个简单的angularjs指令,它使用JQuery将模板转换为可拖动的对话框

var myApp = angular.module("myApp", []);
myApp.controller('myCtrl', function ($scope) {
    $scope.tasks = [{
        name: 'learn angular',
        show: false
    }, {
        name: 'build an angular app',
        show: false
    }];
    $scope.showBox = function (taskname) {
        for (var i = 0; i < $scope.tasks.length; i++) {
            if ($scope.tasks[i].name === taskname) {
                $scope.tasks[i].show = !$scope.tasks[i].show;
            }
        }
    }
});
myApp.directive("draggableDialog", function () {
    return {
        template: 'task: {{task.name}}',
        link: function (scope, element, attrs) {
            element.dialog({
                title : "My Dialog",
                autoOpen: false
            });
            element.bind("dialogclose", function () {
                if (!scope.$$phase) {
                    scope.$apply(function () {
                        scope[attrs.draggableDialog] = false; //here is the problem
                    });
                }
            });
            scope.$watch(attrs.draggableDialog, function (v) {
                if (v) {
                    element.dialog("open");
                } else {
                    element.dialog("close");
                }

            });
        }
    }
});
var myApp=angular.module(“myApp”,[]);
myApp.controller('myCtrl',函数($scope){
$scope.tasks=[{
名称:'学习角度',
节目:假
}, {
名称:“构建角度应用程序”,
节目:假
}];
$scope.showBox=函数(任务名){
对于(变量i=0;i<$scope.tasks.length;i++){
if($scope.tasks[i].name==taskname){
$scope.tasks[i].show=!$scope.tasks[i].show;
}
}
}
});
指令(“DragableDialog”,函数(){
返回{
模板:“任务:{{task.name}}”,
链接:函数(范围、元素、属性){
元素对话框({
标题:“我的对话”,
自动打开:错误
});
元素绑定(“dialogclose”,函数(){
如果(!范围$$阶段){
作用域:$apply(函数(){
scope[attrs.draggableDialog]=false;//问题出在这里
});
}
});
范围$watch(attrs.draggableDialog,函数(v){
如果(v){
元素对话框(“打开”);
}否则{
元素对话框(“关闭”);
}
});
}
}
});
我正在NGREPLACE中使用此指令

<div>
     <h2>Draggable Dialog</h2>
    <div ng-controller="myCtrl">
        <ul class="unstyled">
            <li ng-repeat="task in tasks">
                <button ng-click="showBox(task.name)">show {{task.name}}</button>{{task.show}}
                <div draggable-dialog="task.show">test</div>
            </li>
        </ul>
    </div>
</div>

可拖动对话框
  • show{{task.name}{{{task.show} 测试
参考这把小提琴:


当用户手动关闭对话框时,我可以检测到该事件,并希望将$scope.task[I].show in myCtrl设置为false。我怎么做?我无法使用独立作用域双向绑定,因为我正在使用此指令和另一个也接受$scope.task的指令。

您将
attrs.draggableDialog
设置为“task.show”,所以当您这样做时
scope[attrs.draggableDialog]=false
您最终得到一个附加到作用域的元素,您可以使用
scope['task.show']
访问该元素,它不同于
scope['task']['show']
scope.task.show

要将父变量一般设置为false,需要计算包含赋值的字符串。对你来说,它看起来是这样的:

scope.$eval(attrs.draggableDialog + ' = false;');

希望这有帮助

为什么不想使用隔离作用域?它会解决你的问题嗨,亚历克斯,我无法使用隔离范围。这是因为我将此指令与另一个元素指令一起使用,该指令必须将$scope.task作为其独立的scope变量包含在同一个$scope.task中。angular抱怨2个指令不能接受相同的范围变量Hi hassassin,我理解这个问题。然而,我希望这个指令可以是一个通用指令,可以在任何地方使用,无论是它本身,在ngRepeat中,还是在我的实际实现中,在第二级嵌套ngRepeat中。