javascript - AngularJS，如果没有包装到 div 中，ng-switch 会失败，给出 : Cannot set property 'nodeValue' of undefined

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>

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

但是，如果我直接在 html 页面中使用不带 div 的模板代码(不使用指令，它就可以工作)

Answer 1

我遇到了完全相同的问题。

我在我的指令模板中使用了一个 JQuery 组件，我在 Controller 中像这样初始化它:

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

原来这个组件/库与 Angular 搞混了。这个问题有两种解决方案:

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

以上任何一个都解决了我的问题。我猜这是很多情况，蹩脚的 JQuery 风格的组件不适合 Angular。大多数时候是 Angular 承担了责任......