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 () {
    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，它可以工作，b/c没有多余的作用域，但是使我的DOM比我在实际情况中要重得多.

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

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

解决方案

这是一个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>"

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

此处已更新 JSFIDDLE ...

更新

我建议使用复杂对象，而不要使用 $ parent ，因为如果您在指令中使用某些指令，如ng-if这样会创建新的作用域，则会破坏您的 $父级解决方案，例如 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屋！