DOM manipulation and $compile not working

[François S]

I have un little problem with DOM manipulation.

Here's my angular function:

$scope.modif = function (e) {
        $scope.temp = e.target.offsetParent.offsetParent.childNodes[3].childNodes[(this.$index+1)*2];
        $scope.temp.childNodes[11].innerHTML = $compile('<button ng-click="save($event)">Save</button>')($scope);
};

but my button is rendered like that in the document:

[[object HTMLButtonElement]

I know that using innerHTML with Angular is wrong but when i'm using .html() i have this error:

$scope.modif = function (e) {
        $scope.temp = e.target.offsetParent.offsetParent.childNodes[3].childNodes[(this.$index+1)*2];
        $scope.temp.childNodes[11].html($compile('<button ng-click="save($event)">Save</button>')($scope));
};

TypeError: undefined is not a function at h.$scope.modif

Thanks, 

François

[Luke Kende]

You are mixing angular scope with dom manipulation.  They are two different things so not surprised you are having trouble.  $scope values should point to javascript literals, objects, arrays, but not to dom elements.  You can't call a jquery method without wrapping it first.... Try this:

$scope.modif = function (e) {
        var temp = angular.element(e.target.offsetParent.offsetParent.childNodes[3].childNodes[(this.$index+1)*2]);

        temp.childNodes[11].html($compile('<button ng-click="save($event)">Save</button>')($scope));
};

[Kamal]

Luke,

An small update on the code, the angular.element should be used for `temp.chldNodes[11]` as html is an jqLite/JQuery methods which is returned by angular.element. As the TypeError also states undefined is not a function which would be `.html` in this case. And also childNodes would have all the nodes which are  HTMLElement or not (comment, text, etc..).

$scope.modif = function (e) {
var temp = e.target.offsetParent.offsetParent.childNodes[3].childNodes[(this.$index+1)*2];
 angular.element(temp.childNodes[11]).html($compile('<button ng-click="save($event)">Save</button>')($scope));
};

[Luke Kende]

Thanks Kamal.  I didn't test my answer just was trying to point him the right direction.  That makes sense.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/DxElKMDIXpo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[François S]

Works fine, thanks a lot !