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



我有一个简单的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");
}
});
}
}
});

我在 ngRepeat 中使用此指令

<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>

参考这个小提琴:http://jsfiddle.net/tianhai/BEtPk/#base

当用户手动关闭对话框时,我可以检测到事件,我想在myCtrl中将$scope.task[i].show设置为false。我该怎么做?我无法使用隔离的作用域双向绑定,因为我将此指令与另一个也采用 $scope.task 的指令一起使用。

你必须attrs.draggableDialog设置为"task.show",所以当你这样做时scope[attrs.draggableDialog] = false你最终会得到一个附加到范围的元素,你可以用不同于scope['task']['show']scope.task.showscope['task.show']

访问该元素要一般地将父变量设置为 false,您需要评估包含赋值的字符串。对你来说,它看起来像这样:

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

希望这有帮助

最新更新