Hi I have the following snippet of code. My objective is to allow the creation of multiple divs and their position, text, height and width are binded to the controller's model.
appModule.controller('textController', function($scope){
var box = {x: '0', y: '0', height: '100px', width: '200px', text: 'this is the default text'};
$scope.textBoxes = [box];
$scope.addNewTextBox = function(){
console.log("creating new textbox!!!");
$scope.textBoxes.push(box);
};
});
appModule.directive('tbox', function($document){
return {
restrict: "E",
template: '<div><div ng-transclude></div>',
transclude: true,
scope: {
model: "=",
},
link: function postLink(scope, element, attrs, ctrl){ //the scope here is the object's scope
var length = scope.$parent.textBoxes.length;
console.log(length);
scope.model = scope.$parent.textBoxes[length-1];
}
}
});
I ran into some problems here. I am unable assign the scope's model variable to the textBoxes variable in the controller, saying
Error: Non-assignable model expression: undefined (directive: tbox)
at Error (<anonymous>)
at h (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:43:213)
at Object.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:43:326)
at Object.e.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:87:13)
at Object.e.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:89:198)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:16:239
at Object.d [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.
Any idea why?
modelon the parent scope? I'm wondering if it's stumbling on the binding in yourscopeattribute. – KayakDave Oct 13 '13 at 15:34scopeis asking to bind to an object calledmodelsince you don't specify anything on the right of the equal sign. Do you need the=at all? – KayakDave Oct 13 '13 at 15:47