从指令中向元素添加 ng-if 属性

Question

我有一个 AngularJS 指令，它接受一个 ID 并对该 ID 进行查找以获得给定 flexbox 元素的 col-width、hide-state 和 order。

我想做的是在隐藏状态为真时向元素添加一个 ng-if=false 属性。有什么方法可以将指令中的 ng-if 属性添加到元素吗？

我当前的代码：

    .directive("responsiveBehaviour", ['ResponsiveService', function(ResponsiveService){
    var linkFunction = function(scope, element, attributes){
        var id = attributes["responsiveBehaviour"];
        var updateResponsiveProperties = function(){
            element.attr("column-width", ResponsiveService.getWidth(id));
            if(ResponsiveService.getOrder(id)){
                element.attr("order", ResponsiveService.getOrder(id));
            }
            if(ResponsiveService.getHidden(id) == true){
                element.attr("hidden", "");
            } else {
                element.removeAttr("hidden");

            }
        };
        if(id) {
            scope.$watch('device', function () {
                updateResponsiveProperties();
            });
        }
    };

如果我加上

element.attr("ng-if", false);

而不是

element.attr("hidden", "");

它只是将 ng-if 属性呈现给元素，但没有发生任何动作，因此尽管 ng-if 为 false，元素仍然呈现并可见。

你知道如何实现我正在寻找的东西吗？

提前致谢。

问候

Answer 1

如下所示：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive( 'test', function ( $compile ) {
  return {
    restrict: 'E',
    scope: { text: '@' },
    template: '<p ng-click="add()">Jenish</p>',
    controller: function ( $scope, $element ) {
      $scope.add = function () {
        var el = $compile( "<test text='n'></test>" )( $scope );
        $element.parent().append( el );
      };
    }
  };
});

工作经验是 here

更新

这是您要求的简单示例。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.add = function () {
    alert('Jenish');
    $scope.cond = false;
  }
  $scope.cond = true;
});

app.directive( 'test', function ( $compile ) {
  return {
    restrict: 'E',
    
    template: '<p ng-click="add()">Click me to hide</p>',
    link: function ( $scope, $element, attr ) {
      
      var child = $element.children().attr('ng-if', 'cond') 
      console.log($element)
      $compile(child)($scope);
    }
     
  };
});

<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <test></test>
  </body>

</html>

希望对您有所帮助。

从指令中向元素添加 ng-if 属性

Add ng-if attribute to a element from within a directive

html

javascript

angularjs

angularjs-directive