关于angularjs：Angular-通过ng-switch进行双向绑定


Angular - two-way binding through an ng-switch

我有一个带有作用域的指令和一个绑定到父作用域值的双向" ="(是的，在对象内部以避免继承问题。)该指令的模板又包含一个ng-switch，这当然创建另一个范围。在ng-switch内，我想将textarea绑定到原始值。它已正确初始化，但是当用户编辑该值时，父作用域值不会更改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var myApp = angular.module('myApp', []);

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

    };
});


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

执行此操作的正确方法是什么？我可以使用ng-show而不是ng-switch，它可以工作，b / c没有多余的作用域，但是使我的DOM比我在现实世界中的实际情况重得多。

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

  • 点击"编辑模式"复选框
  • 请注意，textarea初始化为" foo"
  • 现在输入文本区域。
  • 请注意，外部作用域中的"当前值"不会更新。

这是一个scope问题...
ng-if指令创建了一个新作用域，这就是为什么不更新模型的原因...

如果您像以前那样使用原始对象，则子作用域创建新实例，而不是从父作用域继承

绑定values而不是values.value，这是一个原始变量，并且您的指令作用域不会遮盖/隐藏原始对象...

这是您的html

1
 

这是指令的模板

1
2
3
4
"" +
  "{{content.value}}" +
  "<textarea ng-model='content.value'/>" +
""

有关更多信息，请了解$ scope ...

这是更新的JSFIDDLE ...

更新

我建议使用复杂的对象而不是使用$ parent，因为如果您在指令中使用某些指令来创建新作用域，如ng-if破坏了$ parent解决方案，则示例JSFIDDLE ...

相关讨论

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

相关讨论