Question

我有一个带范围的指令和一个双向'='绑定到父范围值（是的，在一个对象内部以避免继承问题。）该指令的模板依次包含一个ng-switch，当然创造另一个范围。在ng-switch里面我想要一个textarea绑定到原始值。它被正确初始化，但是当用户编辑该值时，父作用域值不会更改。

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

myApp.directive('csContenteditable', function () {
    return {
        restrict: 'A',
        scope: {
            content: "=",
            editMode: "=csContenteditable",
        },
        template: 
            "<div ng-switch='editMode'>" +
                "<div ng-switch-when='false'>{{content}}</div>" +
                "<div ng-switch-when='true'><textarea ng-model='content'/><div>" +
            "<div>"

    };
});


function MyCtrl($scope) {
    $scope.editMode = false;
    $scope.values = {value: 'foo'}
}

这样做的正确方法是什么？我可以使用ng-show而不是ng-switch它可以工作，但是没有额外的范围，但是在我的实际案例中，我的DOM比必要的重得多。

演示：http://jsfiddle.net/LF5UL/

点击“修改模式”复选框
请注意textarea使用“foo”
现在输入textarea。
请注意，外部作用域中的“当前值”不会更新。

Answer 1

这是一个scope问题...... ng-if指令创建新范围，表明您的模型未更新的原因......

如果您使用原始对象，那么子范围创建新实例而不是从父范围继承

绑定values而不是values.value这是一个原始变量，你的指令范围不会遮蔽/隐藏原始对象......

这是 html

<div content="values" cs-contenteditable="editMode" />

这是指令的模板

"<div ng-switch='editMode'>" +
   "<div ng-switch-when='false'>{{content.value}}</div>" +
   "<div ng-switch-when='true'><textarea ng-model='content.value'/><div>" +
"<div>"

了解更多信息，请查看understanding $scope ...

此处更新JSFIDDLE ...

<强>更新

我建议使用复杂对象，而不是使用 $ parent ，因为如果您在指令中使用某些指令来创建像ng-if这样的新范围，请打破 $ parent 解决方案，这里是示例JSFIDDLE ...

Answer 2

我会被愚弄，我刚刚解决了这个问题。答案是在指令内的两种情况下都使用$parent.content而不是content。

角度 - 通过ng-switch进行双向绑定

2 个答案: