從範圍內調用element.replaceWith $上引發TypeError

我們有以下指令：

.directive("directiveToggleElement", function(FlagsService) { 
    return { 
     restrict: "E", 
     scope: {}, 
     link: function(scope, element, attrs) 
     { 
      scope.showMe = FlagsService.isOn(attrs.toggleKey); 
      scope.featureText = attrs.featureText; 

      var htmlTag = '<div class="panel ng-scope" ng-class="{selected: selected}" ng-click="selected = !selected;"></div>'; 
      var htmlComment = '<!-- TogglePlaceholder: ' + attrs.toggleKey +'-->'; 
      element.replaceWith(scope.showMe ? htmlComment + htmlTag : htmlComment); 

      // Listen for change broadcast from flagsservice to toggle local store 
      scope.$on('LocalStorage.ToggleChangeEvent.' + attrs.toggleKey, function(event, parameters) { 
       console.log('stuff changed - ' + parameters.key + ' ' + parameters.newValue); 
       scope.showMe = parameters.newValue; 
       element.replaceWith(scope.showMe ? htmlComment + htmlTag : htmlComment); 
      }); 
     } 
    } 
})

的想法是，基於特徵切換（或功能標誌）的值，該指令將輸出評論標籤，或只是評論。

最初的element.replaceWith按預期工作，但在範圍。$ on內的調用會生成「TypeError：Can not call method'nullChild'。我們在每次通話前都檢查過元素，無法發現明顯的差異。

任何人都可以解釋爲什麼會在這裏拋出錯誤，或建議一個潛在的解決方法，這將允許我們做同樣的事情？

我們有規定的NG-顯示值工作指令：

.directive("directiveToggle", function(FlagsService) { 
    return { 
     restrict: "A", 
     transclude: true, 
     scope: {}, 
     link: function(scope, element, attrs) 
     { 
      scope.showMe = FlagsService.isOn(attrs.toggleKey); 

      // Listen for change broadcast from flagsservice to toggle local store 
      scope.$on('LocalStorage.ToggleChangeEvent.' + attrs.toggleKey, function(event, parameters) { 
       console.log('stuff changed - ' + parameters.key + ' ' + parameters.newValue); 
       scope.showMe = parameters.newValue; 
      }); 
     }, 
     template: '<div class="panel ng-scope" ng-show="showMe" ng-class="{selected: selected}" ng-click="selected = !selected;"><span ng-transclude></span></div>', 
     replace: true 
    } 
})

但我們寧願從DOM，而不是設置顯示爲none刪除的元素。

來源

2014-01-16 kevinawalker

我只需要將它從DOM中刪除，爲什麼不使用'ngIf' ?.請提供一名運動員。 –

嗨@Ilan，儘管ngIf會（並且確實）工作，但我們故意避免讓我們的控制器調用flagsservice - 我將創建一個在線演示工作 – kevinawalker

您仍然可以在自定義「directiveToggle」中使用ng-if指令而無需控制器。要做到這一點，你需要使用transclude選項：

.directive("directiveToggle", function (FlagsService) { 
    return { 
     template: '<div ng-transclude ng-if="isEnabled"></div>', 
     transclude: true, 
     restrict: 'A', 
     scope: true, 
     link: function ($scope, $element, $attrs) { 
      var feature = $attrs.featureToggle; 
      $scope.isEnabled = FlagsService.isOn(feature); 

      $scope.$on('LocalStorage.ToggleChangeEvent.' + feature, function (event, parameters) { 
       $scope.isEnabled = parameters.newValue; 
      }); 
     } 
    } 
});

以上正在從「directiveToggle」內的加價，然後它包裝的模板，其中「NG-transclude」指令標記內插入點。模板中還包含一個「ng-if」指令，該指令在「directiveTemplate」的當前範圍內監視「isEnabled」成員。

這種方法的一個警告是，如果你有這個指令的多個實例，你需要該指令來創建它自己的作用域/隔離範圍，否則將在這些指令之間共享「isEnabled」成員。

來源

2014-01-16 20:01:26 Shepless

精美地工作，正是我們所期待的！感謝您的時間 – kevinawalker

從範圍內調用element.replaceWith $上引發TypeError

回答

相關問題