Question

我要做的是以下内容：

<!-- directive: ng-my-if condition -->
<link rel="stylesheet" ng-href="myStyle1.css">
<link rel="stylesheet" ng-href="myStyle2.css">
<link rel="stylesheet" ng-href="myStyle3.css">
<!-- end ng-my-if -->

我试图建立自己的ngIf但是没有用有没有办法实现这个想法？
为什么要使用HTML评论？因为样式将位于<head>标记中，不允许使用<div>或其他标记在其中添加ngIf，还会因为myStyle1.css, myStyle2.css, myStyle3.css将被压缩使用带有.css插件的gulp任务进入一个useref文件，因此我无法为每个样式标记添加ng-if。
也无法将link标记放在body内并用div包裹它们，因为link标记中有<head>个标记，我需要尊重订单他们。

Answer 1

AngularJS限制仅ng-if使用attribute A，如下所示。所以，你不能在comment

中使用它

var ngIfDirective = ['$animate', function($animate) {
  return {
    transclude: 'element',
    priority: 600,
    terminal: true,
    restrict: 'A',

相反，您可以创建一个限制M的custome指令，如下所示。我在下面写的当前指令适用于每个元素的一个注释。如果需要处理多个元素，则应该扩展该指令。

注意：我仅使用下面的div来显示/隐藏值，因为link没有任何显示

var app = angular.module('app', []);

app.controller('TestController', function($scope){
  $scope.checked = true;
});

app.directive('ngIfExt', function() {
    return {
      restrict: 'M',
      link: function(scope, element, attrs) {
        scope.$watch(attrs.ngIfExt, function(value, oldValue) {
            if(value) {
              if(attrs.target){
                 $(element).after(attrs.target);
               }
            } else {
                var targetElement = $(element).next().clone();
                attrs.target = targetElement;
                $(element).next().remove();
            }
        }, true);
    }};
});

angular.bootstrap(document, ['app']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="TestController">
  <input type="checkbox" ng-model="checked"/> Show/hide
  <!-- directive: ng-if-ext checked -->
  <link rel="stylesheet" ng-href="myStyle1.css">
  <!-- directive: ng-if-ext checked -->
  <link rel="stylesheet" ng-href="myStyle2.css">
  <!-- directive: ng-if-ext checked -->
  <link rel="stylesheet" ng-href="myStyle3.css">
  <!-- directive: ng-if-ext checked -->
  <div>Test</div>
</div>

如何在HTML评论中使用ngIf？

1 个答案: