AngularJS，如果未包装到div中，则ng-switch失败：无法设置未定义的属性“ nodeValue”

Question

我有两个指令：

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');
      };
    }
  };
});

以及相关的模板：

<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>

如您所见，每个ng-switch-when都有：

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

一个double div，我认为这是不好的模板。但是，如果我删除div：

<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>

更新：我收到此错误：

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)

但是，如果我使用不带div的模板代码直接进入html页面（不使用指令，则可以使用）

Answer 1

我有同样的问题。

我在指令模板中使用了JQuery组件，并在控制器中对其进行了初始化：

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

原来，这个组件/库与Angular混为一谈。有两种解决方案：

1. 将组件初始化代码移到指令的链接函数中。
2. 将.crappy-component-target元素包装在元素内<div>。

以上任何一种都解决了我的问题。我猜这是很多情况，糟糕的JQuery样式的组件不会与Angular一起使用。在大多数情况下，应归咎于Angular ...