从指令中将 ng-if 属性添加到元素答案

【问题标题】：Add ng-if attribute to a element from within a directive从指令中将 ng-if 属性添加到元素
【发布时间】：2015-02-21 01:54:17
【问题描述】：

我有一个 AngularJS 指令，它接受一个 ID 并在此 ID 上进行查找以获取给定弹性框元素的 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，但该元素仍然呈现且可见。

您对如何实现我的目标有任何想法吗？

提前致谢。

问候

【问题讨论】：

我想那么你需要在添加 ng-if 属性后使用 $compile 服务来编译元素。
感谢您的反馈。我该怎么做？你能给我一个样品吗？

标签： javascript html angularjs angularjs-directive

【解决方案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>

希望对你有帮助。

【讨论】：

好的。但是我将如何调整我现有的代码？因为我不喜欢添加整个元素而只添加一个属性？
@marcbaur 我想你只是想知道如何使用 Angular 的编译服务。但是，我稍后会通过简单演示您想要的内容来更新我的答案。
@marcbaur 你可能看过。我已经更新了我的答案。