If this question has already been answered please point me to the currect location (I have searched quite a bit but could not find a matching solution - I´m sorry if I missed it !)
First of all: at the present moment I have to stick to AngularJS 1.0.0rc10 And: (if its possible) I´d like the way the directive is defined / called to be remain that way (as it is already used quite extensivly)
This should actually be quite trivial - still, I have no clue what the flaw in my approach is. Basically I have created a few custom directives which are used to generate form elements (they are a bit more complexe than the example I have provided, but the problem is the same). I generate (actually I copy) an object within the controller, pass it into the scope and use my directives to bind to the various properties of this object (in the example I have added two use-cases: a single list and an array of objects which are handled by a repeater)
It seems that the two-way binding is not successful when it comes to primitive data types. The desired result should be: change the input for the text-only property (it works with the instance-object) and log the scope´s object in the console (firefox: console.log) which should reflect the change.
Please note that I did choose the compile approach, as the names of the properties (in this case: text and instance) should be defined freely in the HTML view (= the directive declerations)
I have created a fiddle under: http://jsfiddle.net/matthias000/vqwHM/2/.
In case the fiddle does not work here is the code:
<!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>
Thanks a lot for any assistance !
kind regards, matthias
EDIT: the top selection of the fiddle should be 'no wrap' - sorry for that !