javascript - AngularJS, ng-switch fails if not wrapped into div giving: Cannot set property 'nodeValue' of undef

I have two directives:

app.directive('uiElement', function () {
  return {
    restrict: 'A',
    replace: true,
    scope: {element: "=uiElement", search: "=search"},
    templateUrl: "/views/uiElement.html",
    link: function (scope, elem, attrs) {
      scope.isImage = function () {
        return (scope.element.type === 'image/png' || scope.element.type === 'image/jpeg');
      };
      scope.isList = function () {
        return (scope.element.type === 'text/list');
      };
      scope.isTodo = function () {
        return (scope.element.type === 'text/todo');
      };
    }
  };
});

And the associated template:

<article class="uiElement" ng-class="{typeImage: isImage(), typeList:isList(), typeTodo:isTodo()}" ng-switch on="element.type">
  <div><div class="inside" ng-switch-when="image/png">
    <i ui-image="element"></i>
  </div></div>
  <div><div class="inside" ng-switch-when="image/jpeg">
    <i ui-image="element"></i>
  </div></div>
  <div><div class="inside" ng-switch-default>{{element.name}}</div></div>
</article>

As you can see each ng-switch-when has:

<div><div class="inside" ng-switch-default>{{element.name}}</div></div>

A double div, and I think this is bad templating. However if I remove the divs:

<article class="uiElement" ng-class="{typeImage: isImage(), typeList:isList(), typeTodo:isTodo()}" ng-switch on="element.type">
  <div class="inside" ng-switch-when="image/png">
    <i ui-image="element"></i>
  </div>
  <div class="inside" ng-switch-when="image/jpeg">
    <i ui-image="element"></i>
  </div>
  <div class="inside" ng-switch-default>{{element.name}}</div>
</article>

Update: I get this error:

TypeError: Cannot set property 'nodeValue' of undefined
    at Object.<anonymous> (http://127.0.0.1:3003/js/angular.min.js:47:448)
    at Object.applyFunction [as fn] (http://127.0.0.1:3003/bubble/5116f5a9cfbecf42ad000006:440:50)
    at Object.e.$digest (http://127.0.0.1:3003/js/angular.min.js:84:307)
    at Object.e.$apply (http://127.0.0.1:3003/js/angular.min.js:86:376)
    at Object.$delegate.__proto__.$apply (http://127.0.0.1:3003/bubble/5116f5a9cfbecf42ad000006:500:30)
    at e (http://127.0.0.1:3003/js/angular.min.js:92:400)
    at n (http://127.0.0.1:3003/js/angular.min.js:95:472)
    at XMLHttpRequest.q.onreadystatechange (http://127.0.0.1:3003/js/angular.min.js:96:380)

However if I use the template code without divs directly into the html page (without using the directive, it works)

I have two directives:

app.directive('uiElement', function () {
  return {
    restrict: 'A',
    replace: true,
    scope: {element: "=uiElement", search: "=search"},
    templateUrl: "/views/uiElement.html",
    link: function (scope, elem, attrs) {
      scope.isImage = function () {
        return (scope.element.type === 'image/png' || scope.element.type === 'image/jpeg');
      };
      scope.isList = function () {
        return (scope.element.type === 'text/list');
      };
      scope.isTodo = function () {
        return (scope.element.type === 'text/todo');
      };
    }
  };
});

And the associated template:

<article class="uiElement" ng-class="{typeImage: isImage(), typeList:isList(), typeTodo:isTodo()}" ng-switch on="element.type">
  <div><div class="inside" ng-switch-when="image/png">
    <i ui-image="element"></i>
  </div></div>
  <div><div class="inside" ng-switch-when="image/jpeg">
    <i ui-image="element"></i>
  </div></div>
  <div><div class="inside" ng-switch-default>{{element.name}}</div></div>
</article>

As you can see each ng-switch-when has:

<div><div class="inside" ng-switch-default>{{element.name}}</div></div>

A double div, and I think this is bad templating. However if I remove the divs:

<article class="uiElement" ng-class="{typeImage: isImage(), typeList:isList(), typeTodo:isTodo()}" ng-switch on="element.type">
  <div class="inside" ng-switch-when="image/png">
    <i ui-image="element"></i>
  </div>
  <div class="inside" ng-switch-when="image/jpeg">
    <i ui-image="element"></i>
  </div>
  <div class="inside" ng-switch-default>{{element.name}}</div>
</article>

Update: I get this error:

TypeError: Cannot set property 'nodeValue' of undefined
    at Object.<anonymous> (http://127.0.0.1:3003/js/angular.min.js:47:448)
    at Object.applyFunction [as fn] (http://127.0.0.1:3003/bubble/5116f5a9cfbecf42ad000006:440:50)
    at Object.e.$digest (http://127.0.0.1:3003/js/angular.min.js:84:307)
    at Object.e.$apply (http://127.0.0.1:3003/js/angular.min.js:86:376)
    at Object.$delegate.__proto__.$apply (http://127.0.0.1:3003/bubble/5116f5a9cfbecf42ad000006:500:30)
    at e (http://127.0.0.1:3003/js/angular.min.js:92:400)
    at n (http://127.0.0.1:3003/js/angular.min.js:95:472)
    at XMLHttpRequest.q.onreadystatechange (http://127.0.0.1:3003/js/angular.min.js:96:380)

However if I use the template code without divs directly into the html page (without using the directive, it works)

• javascript
• angularjs
• angularjs-directive

Share Improve this question Follow edited Feb 10, 2013 at 10:54 piggyback asked Feb 10, 2013 at 10:47 piggybackpiggyback 9,2641414 gold badges5454 silver badges8282 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

I had the exact same problem.

I was using a JQuery ponent inside my directive's template and I was initializing it like so in the controller:

$element.find('.crappy-ponent-target').crappyComponent();

Turns out that this ponent/library was messing up with Angular. There were two solutions to this problem:

1. Move the ponent initialization code inside the link function of your directive.
2. Wrap the .crappy-ponent-target element inside a <div> element.

Either of the above solved my problem. I guess that's a case of many, where crappy JQuery-style ponents don't go along with Angular. And most of the times it's Angular that takes the blame...

I had this same error message. The code was something like this:

<div><div class="foo">Some element</div></div>
<div class="bar">{{String I'm trying to add to previously working div}}</div>

I moved the div I was editing above the double-div element (the order on these didn't matter) and it worked fine. Not sure exactly what the problem was, but it does seem that nested divs are a factor.

I also had a similar problem. I am not sure why but removing replace: true(set it to false) of the directive solves this problem.

Maybe I should make an issue of this.

I have the same issue with

  <select ng-model="approvals.TimeFilterSelected"
                ng-options="item.name for item in approvals.TimeFilterSelect"></select>

        <p>Selected: {{approvals.TimeFilterSelected || 'None'}}</p>

If that code is in nested div which is some levels down after the div which holds the ng-controller - it dosn't work. Moving that just after the controller div works fine. What should we do in these situations if we want to keep the same structure of html ?!! Can that be Angular bug? I do not see any issue with my HTML formatting.

I'm experiencing the same issue with a slightly different error:

TypeError: Cannot read property 'childNodes' of undefined
    at positeLinkFn (angular.js:3841:35)
    at nodeLinkFn (angular.js:4217:24)
    at positeLinkFn (angular.js:3827:14)
    at nodeLinkFn (angular.js:4217:24)
    at angular.js:4358:15
    at nodeLinkFn (angular.js:4217:24)
    at angular.js:4357:13
    at angular.js:8625:11
    at wrappedCallback (angular.js:6586:59)
    at angular.js:6623:26 

This is with AngularJS v1.0.1

I can also confirm that surrounding my ng-switch-when with another solved the issue. But it would be great to know why it happens and how it could be avoided.