Data binding Angular JS-自定义指令内的双向绑定_Data Binding_Angularjs_Directive_Dynamic Properties

Data binding Angular JS-自定义指令内的双向绑定

data-binding angularjs

Data binding Angular JS-自定义指令内的双向绑定,data-binding,angularjs,directive,dynamic-properties,Data Binding,Angularjs,Directive,Dynamic Properties,如果这个问题已经得到回答，请告诉我当前的位置（我已经搜索了很多次，但找不到匹配的解决方案-如果我错过了，我很抱歉！）首先：目前我必须坚持使用AngularJS 1.0.0rc10 并且：（如果可能的话）我希望指令的定义/调用方式保持不变（因为它已经被广泛使用）这实际上应该是相当琐碎的——不过，我不知道我的方法有什么缺陷。基本上，我创建了一些用于生成表单元素的自定义指令（它们比我提供的示例要复杂一些，但问题是相同的）。我在控制器中生成（实际上是复制）一个对象，将其传递到范围中，并使用我的指

如果这个问题已经得到回答，请告诉我当前的位置（我已经搜索了很多次，但找不到匹配的解决方案-如果我错过了，我很抱歉！）

首先：目前我必须坚持使用AngularJS 1.0.0rc10 并且：（如果可能的话）我希望指令的定义/调用方式保持不变（因为它已经被广泛使用）

这实际上应该是相当琐碎的——不过，我不知道我的方法有什么缺陷。基本上，我创建了一些用于生成表单元素的自定义指令（它们比我提供的示例要复杂一些，但问题是相同的）。我在控制器中生成（实际上是复制）一个对象，将其传递到范围中，并使用我的指令绑定到此对象的各种属性（在示例中，我添加了两个用例：一个列表和一个对象数组，由中继器处理）

对于原始数据类型，双向绑定似乎并不成功。期望的结果应该是：更改纯文本属性的输入（它与实例对象一起工作），并将作用域的对象记录在控制台（firefox:console.log）中，该控制台应反映更改

请注意，我确实选择了编译方法，因为属性的名称（在本例中为：text和instance）应该在HTML视图中自由定义（=指令declarations）

我在下面创作了一把小提琴：

如果小提琴不起作用，代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <script language="javascript" type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="angular/angular-1.0.0rc10.js"></script>
    <script language="javascript" type="text/javascript" src="bootstrap/js/bootstrap.js"></script>  
    <script type="text/javascript">
        angular.module('TestApplication', [])
            .directive('formTextInput', function() {
                return {
                    restrict: 'E',
                    compile: function(element, attrs) {
                        var htmlText = '<input class="input-small" type="text" ng-model="' + attrs.property + '">';
                        element.replaceWith(htmlText);
                    }
                }
            })
            .directive('formObjectInput', function() {
                return {
                    restrict: 'E',
                    compile: function(element, attrs) {
                        var htmlText = '<div class="input-append">' +
                            '<input class="input-small" type="text" ng-model="' + attrs.property + '.text">' +
                            '<span class="add-on">{{notimportant}}</span>' +
                        '</div>';
                        element.replaceWith(htmlText);

                        return this.link;
                    },
                    link:function(scope, element, attrs) {
                        scope.notimportant = eval('scope.' + attrs.property + '.append');                       
                    }
                }
            })
            .directive('formShowBtn', function() {
                return {
                    restrict: 'E',
                    replace:true,
                    scope:{},
                    template: '<button class="btn" ng-click="display()">Show</button>',
                    link:function(scope, element, attrs) {
                        scope.display = function() {
                            scope.$parent.display(attrs.property);
                        };
                    }
                }
            });

        function TestController($scope) {
            var testobjectsingle = {text: 'hello text', instance: {text: 'hello instance', append: 'ST'}};
            $scope.testobjectsingle = testobjectsingle;

            var testobjectarray = [];
            for (var i = 0 ; i < 2 ; i++) 
                testobjectarray.push( {text: 'hello text' + i,  instance: {text: 'hello instance' + i, append: 'ST'}} );

            $scope.testobjectarray = testobjectarray;

            $scope.display = function(value) {
                console.log( JSON.stringify($scope[value]) );
            };
        }
    </script>
</head>
<body>
    <div ng-app="TestApplication">
        <div ng-controller="TestController">
            <div style="padding:20px">
                <form-text-input data-property="testobjectsingle.text"></form-text-input>
                <form-object-input data-property="testobjectsingle.instance"></form-object-input>
                <form-show-btn data-property="testobjectsingle"></form-show-btn>
            </div>

            <div style="padding:20px">
                <div ng-repeat="singleelement in testobjectarray">
                    <form-text-input data-property="singleelement.text"></form-text-input>
                    <form-object-input data-property="singleelement.instance"></form-object-input>
                </div>
                <form-show-btn data-property="testobjectarray"></form-show-btn>
            </div>
        </div>
    </div>
</body>
</html>


angular.module（'TestApplication'，[]）
.directive（'formTextInput'，function（）{
返回{
限制：'E'，
编译：函数（元素、属性）{
var htmlText=''；
元素。替换为（htmlText）；
}
}
})
.directive（'formObjectInput'，function（）{
返回{
限制：'E'，
编译：函数（元素、属性）{
var htmlText=''+
'' +
“{{不重要}}”+
'';
元素。替换为（htmlText）；
返回此.link；
},
链接：函数（范围、元素、属性）{
scope.notimportant=eval（'scope.'+attrs.property+'.append'）；
}
}
})
.directive（'formShowBtn'，function（）{
返回{
限制：'E'，
替换：正确，
作用域：{}，
模板：“显示”，
链接：函数（范围、元素、属性）{
scope.display=函数（）{
范围$parent.display（属性）；
};
}
}
});
函数TestController（$scope）{
var testobjectsingle={text:'hello text'，实例：{text:'hello instance'，append:'ST'}；
$scope.testobjectsingle=testobjectsingle；
var testobjectarray=[]；
对于（变量i=0；i<2；i++）
push（{text:'hello text'+i，实例：{text:'hello instance'+i，append:'ST'}}）；
$scope.testobjectarray=testobjectarray；
$scope.display=函数（值）{
log（JSON.stringify（$scope[value]）；
};
}

非常感谢您的帮助

亲切问候,，马蒂亚斯

编辑：提琴的顶部选择应该是“无环绕”-抱歉

这是由中的一位Angular开发人员解决的。最后一句话说明了这一切——“不要绑定到原语”。谢谢你的回答——似乎我们还需要围绕原语值包装一些对象。谢谢你的时间和帮助！