Two directives are at play here:
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');
};
}
};
});
The corresponding template is as follows:
<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>
Notice that each ng-switch-when contains:
<div><div class="inside" ng-switch-default>{{element.name}}</div></div>
The double div structure may not be ideal for templating. However, removing the divs results in cleaner code:
<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: Removing the div elements leads to 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, using the template code without divs directly in the HTML document (without involving the directive) eliminates the issue.