2

我有两个指令：

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 的模板代码（不使用指令，它可以工作）

4

5 回答 5

5

我有同样的问题。

我在指令模板中使用了一个 JQuery 组件，我在控制器中像这样初始化它：

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

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

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

以上任何一个都解决了我的问题。我想这是很多情况，其中蹩脚的 JQuery 样式组件不适合 Angular。而且大多数时候是 Angular 承担了责任……

于 2015-09-05T13:48:35.947 回答
3

我有同样的错误信息。代码是这样的：

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

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

于 2014-08-13T19:07:04.753 回答
2

我也有类似的问题。我不知道为什么，但删除replace: true（将其设置为 false）指令可以解决这个问题。

也许我应该提出这个问题。

于 2013-10-08T01:23:31.030 回答
2

我有同样的问题

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

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

如果该代码位于嵌套 div 中，该 div 在包含 ng-controller 的 div 之后的某些级别 - 它不起作用。在控制器 div 之后移动它可以正常工作。如果我们想保持 html 的相同结构，在这些情况下应该怎么做？！！那可能是Angular错误吗？我没有看到我的 HTML 格式有任何问题。

于 2015-04-09T16:13:17.533 回答
1

我遇到了同样的问题，但错误略有不同：

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)
    在 angular.js:6623:26

这是 AngularJS v1.0.1

我还可以确认将我的 ng-switch-when 与另一个一起解决了这个问题。但是很高兴知道它为什么会发生以及如何避免它。

于 2013-02-18T03:07:18.910 回答