Angular - 通过 ng-switch 进行双向绑定 [英] Angular - two-way binding through an ng-switch

问题描述

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

var myApp = angular.module('myApp', []);myApp.directive('csContenteditable', function () {返回 {限制:'A'，范围: {内容:="，editMode: "=csContenteditable",},模板:<div ng-switch='editMode'>"+<div ng-switch-when='false'>{{content}}</div>"+<div ng-switch-when='true'><textarea ng-model='content'/><div>"+
"};});函数 MyCtrl($scope) {$scope.editMode = false;$scope.values = {value: 'foo'}}

这样做的正确方法是什么?我可以使用 ng-show 而不是 ng-switch 并且它可以工作，b/c 没有额外的范围，但使我的 DOM 在我的实际实际案例中比所需的要重得多.

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

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

解决方案

it is a scope issue...ng-if 指令创建一个新范围，说明为什么你的模型没有更新......

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

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

这是您的 html

这里是指令的模板

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

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

这里更新了JSFIDDLE...

更新

我建议使用 complex object 而不是使用 $parent 因为如果你在你的指令中使用了一些创建新作用域的指令，比如 ng-if 打破你的 $parent 解决方案，这里是例子 JSFIDDLE...

I have a directive with scope and a two-way '=' binding to a parent-scope value (yes, inside an object to avoid inheritance problems.) The directive's template in turn contains an ng-switch, which of course creates another scope. Inside the ng-switch I want to have a textarea bound to the original value. It gets initialized correctly, but when the user edits the value, the parent scope value doesn't change.

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

What is the right way to do this? I can use ng-show instead of ng-switch and it works, b/c there is no extra scope but makes my DOM a lot heavier than necessary in my actual real-world case.

Demo: http://jsfiddle.net/LF5UL/

• Click the "edit mode" checkbox
• Note the textarea is initialized with "foo"
• Now type in the textarea.
• Note the "Current value" in the outer scope doesn't update.

解决方案

it is a scope issue... ng-if directive creates a new scope that why your model is not updated...

if you use primitive object like you used there child scope create new instance instead of inherite from parent scope

bind values instead of values.value which is a primitive variable and your directive scope don't shadow/hide your original object...

here is your html

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

and here is directive's template

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

for more information look understanding $scope...

and here is updated JSFIDDLE...

UPDATE

I recommend using complex object instead of using $parent because if you use some directive in your directive which create new scope like ng-if break your $parent solution, here is example JSFIDDLE...

这篇关于Angular - 通过 ng-switch 进行双向绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！