2

私には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)

ただし、divを使用せずにテンプレートコードを直接htmlページに使用すると（ディレクティブを使用せずに機能します）

4

5 に答える 5

3

これと同じエラーメッセージがありました。コードは次のようなものでした。

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

編集していた div を double-div 要素の上に移動しました (これらの順序は関係ありません)。正常に機能しました。問題が何であったか正確にはわかりませんが、ネストされた div が要因のようです。

于 2014-08-13T19:07:04.753 に答える
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 で
    ラップされたコールバック (angular.js:6586:59) で
    angular.js:6623:26 で

これは AngularJS v1.0.1 です。

また、ng-switch-when を別のもので囲むことで問題が解決したことも確認できます。しかし、なぜそれが起こるのか、どうすれば回避できるのかを知ることは素晴らしいことです.

于 2013-02-18T03:07:18.910 に答える