Javascript AngularJS，ng开关如果未包装到div giving中将失败：无法设置属性'；nodeValue'；未定义的

我有两个指示：

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>

一个双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>

{{element.name}

更新：我收到以下错误：

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)

TypeError:无法设置未定义的属性'nodeValue'
反对。(http://127.0.0.1:3003/js/angular.min.js:47:448)
at Object.applyFunction[作为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)
在Object.e.$apply(http://127.0.0.1:3003/js/angular.min.js:86:376)
在对象处。$delegate.\uuuu proto.$apply(http://127.0.0.1:3003/bubble/5116f5a9cfbecf42ad000006:500:30)
在e(http://127.0.0.1:3003/js/angular.min.js:92:400)
在n(http://127.0.0.1:3003/js/angular.min.js:95:472)
在XMLHttpRequest.q.onreadystatechange(http://127.0.0.1:3003/js/angular.min.js:96:380)

---

但是，如果我在html页面中直接使用没有div的模板代码（没有使用指令，它就可以工作）

我遇到了相同的问题，但有一个稍微不同的错误：

TypeError: Cannot read property 'childNodes' of undefined at compositeLinkFn (angular.js:3841:35) at nodeLinkFn (angular.js:4217:24) at compositeLinkFn (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 TypeError:无法读取未定义的属性“childNodes” 在compositeLinkFn（angular.js:3841:35） 在nodeLinkFn（angular.js:4217:24） 在compositeLinkFn（angular.js:3827:14） 在nodeLinkFn（angular.js:4217:24） 在angular.js:4358:15 在nodeLinkFn（angular.js:4217:24） 在angular.js:4357:13 在angular.js:8625:11 在wrappedCallback（angular.js:6586:59） 角度：js:6623:26 这是AngularJS v1.0.1的一部分

---

我还可以确认，在使用另一个ng开关时，我的ng开关解决了问题。但如果能知道它为什么会发生以及如何避免，那就太好了。

我也有类似的问题。我不知道为什么，但删除指令的

replace:true

（将其设置为false）可以解决此问题

---

也许我应该对此提出质疑。

我收到了同样的错误消息。代码是这样的：

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

某个元素
{{我试图添加到以前工作的div中的字符串}

---

我把我正在编辑的div移到了double div元素的上方（这些元素的顺序无关紧要），效果很好。不确定到底是什么问题，但嵌套的div似乎是一个因素。

我也有同样的问题

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

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

所选：{approvals.TimeFilterSelected | |'None'}

---

如果该代码位于嵌套div中，该div位于持有ng控制器的div之后的某个级别，则它不起作用。在控制器div工作正常之后移动它。如果我们想保持html的相同结构，在这种情况下我们应该怎么做？！！那会是角虫吗？我没有发现HTML格式有任何问题。

我也有同样的问题

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

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

原来这个组件/库和Angular搞砸了。 这个问题有两种解决方案：

将组件初始化代码移到指令的链接函数中

将

.crapy组件目标

元素包装在

元素中

以上任何一项都解决了我的问题。

---

我想这是很多情况下的一个例子，糟糕的JQuery风格的组件与Angular不匹配。大多数情况下，承担责任的人都是棱角分明的人……

对TinyMCE也有同样的问题。用

div

包装后，问题消失。感谢tipSame的问题，该按钮的ngClick指令不起作用（没有控制台错误，只是没有启动）。有一个

textarea

，我在前面的几个元素上初始化CodeMirror。将

textarea

包装在

div

中就成功了。

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