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

问题

I have a AngularJS directive which takes an ID and makes a lookup on this ID to get col-width, hide-state and order for a given flexbox element.

What I d like to do is to add a ng-if=false attribute to the element if its hide-state is true. Is there any way, how I can add ng-if attribute from within a directive to a element?

My current code:

    .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();
            });
        }
    };

If I add

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

instead of

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

it just renders out the ng-if attribute to the element but there is no action happening, so the element is still rendered and visible although ng-if is false.

Do you have any idea on how to achieve what I am looking for?

Thanks in advance.

Greets

回答1:

something like below:

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 );
      };
    }
  };
});

working plunk is here

Update

Here is simple example as you requested.

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>

I hope this would help you.

来源：https://stackoverflow.com/questions/28622151/add-ng-if-attribute-to-a-element-from-within-a-directive

标签

javascript

html

angularjs

angularjs-directive