Invalid argument in IE when using $compile

[Matsemann]

A fiddle with a trivial example: http://jsfiddle.net/1t4crp6e/

<div ng-app="myApp">
    <div ng-controller="myctrl">
        <div test>the value is: {{testmodel}}</div>

        <br>
        <input type="text" ng-model="testmodel">
    </div>
</div>
....
link: function(scope, elm, attrs) {
            var standardText = elm.text();

            elm.html('something');

            $timeout(function() {
                console.log(standardText);
                elm.html('').append($compile('<span>' + standardText + '</span>')(scope.$parent));
            }, 2000);
        }

Wait 2 secs, see the content of directive change to a binding. In Firefox, everything works. In IE it works, but it throws a lot of errors in the console.
(Don't worry about what I'm doing here, I just made a small example showing the issue)

Error: Invalid argument.
at Anonymous function (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:62:80)
at k.prototype.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:109:350)
at k.prototype.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:112:343)
at Anonymous function (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:18:158)
at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:34:474)
at c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:18:66)
at fc (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:18:270)
at Xc (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:17:362)
at Anonymous function (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js:214:78)
at o (https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js:2:14725)

However, most of my tries of actually writing this worked in all browsers except IE. For instance, if I remove the span in the compile, and instead of elm.text() use elm.contents().
http://jsfiddle.net/1t4crp6e/1/ Only changed line 13 and 19 in the js, breaks horribly in IE. It's almost impossible to compile stuff in IE.

Am I doing something wrong? And any workarounds?

[Matsemann]

Update: The error message here wasn't that helpful. When doing it not inside an anonymous function this is the message:

Error: Invalid argument.
at interpolateFnWatchAction (http://localhost:8080/app/libs/angular/angular.js:6957:19)
at Scope.prototype.$digest (http://localhost:8080/app/libs/angular/angular.js:12497:23)
at Scope.prototype.$apply (http://localhost:8080/app/libs/angular/angular.js:12762:13)
at listener (http://localhost:8080/app/libs/angular/angular.js:16998:9)
at jQuery.event.dispatch (http://localhost:8080/app/libs/jquery/jquery.js:3073:6)
at elemData.handle (http://localhost:8080/app/libs/jquery/jquery.js:2749:5)

[caitp]

Seems to throw one error, it has issues assigning an interpolated value to the node (not sure if it's the subsequently compiled <span>, or if it's the <div>).

If you can figure out what it's trying to assign to nodeValue when it throws, that would be for the best.

I don't think this is breaking any of your other watches though (i'd have to double check), but it looks like $exceptionHandler is dealing with this nicely

[Matsemann]

It will rethrow the error each time you change the value in the input box. It happens also in my second example (but this time everything breaks in IE), so it may not be the span?

Not sure how to debug this? It happens the next digest as far as I can tell, so difficult to track with my limited experience since it happens so much between my code and the error.

I agree, it seems to work as it should (the first example) except for all the errors. Why doesn't the second one work, though? Any ideas for a better way to compile stuff inside a directive?

[caitp]

Any ideas for a better way to compile stuff inside a directive?

Don't compile stuff inside a directive, this isn't what you want to do unless you really understand the html compiler

[Matsemann]

Any ideas for a different way to achieve what I'm trying?

I have a button, which the directive is applied to. The directive watches a value set by the controller, that changes the content of the button.
<button button-loader="isLoading">Save {{model.value}}</button>

So originally the content of the button would be:
Save article 1
then $scope.isLoading=true would make the content be:
Saving
then $scope.isLoading=false would make the content be:
Saved
and then after 1500ms the content again should be
Save article 1
with the original databinding.

My code is here, but it contains some other stuff as well.
What I'm trying to do is add a compile to showStandard (around line 70) to support databinding inside the button, not just raw text.

[Matsemann]

Transcluding it, and then just show/hide the original binding and show something else when needed seem to work fine.

[siemiatj]

I've noticed that in my case returning from textInterpolateLinkFn, when node.nodeValue is an empty string fixes all problems in IE:

            return function textInterpolateLinkFn(scope, node) {
              var parent = node.parent();
              if (!hasCompileParent) compile.$$addBindingClass(parent);
              compile.$$addBindingInfo(parent, interpolateFn.expressions);
              scope.$watch(interpolateFn, function interpolateFnWatchAction(value) {
                if (!node[0].nodeValue) {
                  return;
                }

                node[0].nodeValue = value;
              });
            };

I can describe my use case or create a runnable test case if needed.

[kentcdodds]

I've noticed this behavior in my app. Not certain how to reproduce it, but based on this stack overflow question it appears to be an issue when the node has no child nodes and therefore nodeValue is null (I guess?) which Internet Explorer has issues with. I'm testing with IE 10. I'm not certain of optimal fix here... In my case, it's simply trying to assign node[0].nodeValue to "Save". But I believe what it is attempting to assign the value to is irrelevant. I think IE just has the problem when you attempt to access nodeValue on a node with no child nodes...

Here's a jsbin based on that Stack Overflow question which shows the issue (when using IE).

[kentcdodds]

I was able to resolve my issue by going from this kind of binding:

<span>{{foo}}</span>

to using the directive version:

<span ng-bind="foo"></span>

Would like to not have to do that if I can help it though :-)

[just-boris]

related issue angular-ui/ui-select#276
solved same way that @kentcdodds did