AngularJS如何动态地添加/删除指令在页面时点击链接

假设我有两个按钮，当我们点击按钮1，然后显示在控制器和相同的单向函数调用当我们点击按钮2然后隐藏在控制器的函数调用。AngularJS如何动态地添加/删除指令在页面时点击链接

从播放功能我怎么能动态地加载和在页面中添加指令，并和我怎么能隐藏或页面删除指令时，隐藏功能将被调用。

因此我新的角度所以不知道下面的代码将在运行时添加的指令，如果我从播放功能调用它呢？

$('body').append($compile("<my-angular-directive />")(scope)); 
scope.$apply();

我不知道如何从页面中删除指令，如果它存在于控制器函数的页面中。给我建议如何实现这一点。感谢

来源

2016-05-13 Monojit Sarkar

你可以用指令为类，你可以用ng-class指令

var jimApp = angular.module("mainApp", []); 
 

 
jimApp.controller('mainCtrl', function($scope){ 
 
    $scope.showMyDir = true; 
 
    $scope.buttonClcik = function(){ 
 
    $scope.showMyDir = !$scope.showMyDir; 
 
    }; 
 
    
 
}); 
 

 
jimApp.directive("customDir1", function() { 
 
    return { 
 
    restrict:"AEC", 
 
    scope:{ 
 
     value:"=" 
 
    }, 
 
    link: function(scope, element, attrs) { 
 
    } 
 
    } 
 
}); 
 

 
jimApp.directive("customDir2", function() { 
 
    return { 
 
    restrict:"C", 
 
    link: function(scope, element, attrs) { 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<div ng-app="mainApp" ng-controller="mainCtrl"> 
 
    <button ng-click="buttonClcik();">Click</button> 
 
    
 
    <div ng-class="{'custom-dir1': showMyDir, 'custom-dir2': !showMyDir}" value="showMyDir">Hai</div> 
 
</div>

来源

2016-05-13 11:42:46 byteC0de

我只是想加载和按钮注入指令单击。 –

如果可能，请告诉我如何使用ng-class加载指令。我使用ng-class来处理css类。 –

@MonojitSarkar不用NG，如果NG，如果是像$工作看它会在你的应用程序性能的影响 – byteC0de

使用ng-if加载它。所以基本上，如果你有一个范围变量假设$scope.showElement那么你可以使用它像这样：

在你的控制器：

$scope.showElement = true;

HTML：

<this-directive ng-if="showElement"></this-directive>

最初的指令会出现，但当您更改$scope.showElement的值时，它将被删除。

编辑根据您的评论：

设置你的$scope.showElement为false和ng-click其设置为true这样的：

angular.module('myApp', []) 
 

 
.controller('testController', function($scope) { 
 
    
 
    $scope.showElement = false; 
 

 
    $scope.toggleElement = function() { 
 
    console.log('toggle element'); 
 
    $scope.showElement = $scope.showElement ? false : true; 
 
    }; 
 
    
 
});

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> 
 
    </head> 
 
    <body ng-controller="testController"> 
 
    <button type="button" ng-click="toggleElement()">Show directive</button> 
 
    <div ng-if="showElement" style="width:100%;height:40px;background-color:red;">This element will be shown/removed</div> 
 
    </body> 
 
</html>

编辑2：

如果您不介意元素仍然保留在页面上但是隐藏，您还可以使用css声明来获得更好的性能。使用CSS，它会是这样的：

angular.module('myApp', []) 
 

 
.controller('testController', function($scope) { 
 
    
 
    $scope.showElement = false; 
 

 
    $scope.toggleElement = function() { 
 
    console.log('toggle element'); 
 
    $scope.showElement = $scope.showElement ? false : true; 
 
    }; 
 
    
 
});

.hidden { 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> 
 
    </head> 
 
    <body ng-controller="testController"> 
 
    <button type="button" ng-click="toggleElement()">Show directive</button> 
 
    <div ng-class="{'hidden' : showElement === false}" style="width:100%;height:40px;background-color:red;">This element will be shown/removed</div> 
 
    </body> 
 
</html>

来源

2016-05-13 11:43:59 thepio

我怎么可以添加指令动态页面按钮点击和追加功能......是否有可能？ –

我不会推荐，我认为你需要做很多才能使它工作。 Ng-if是针对这种情况的，为什么你需要特别需要将它附加到DOM？ – thepio

你可以很容易地使用ng-if指令上的自定义指令的包装

<div ng-if="showMyDir()"> 
    <my-angular-directive /> 
</div> 

<div ng-if="showMyDirTwo()"> 
    <my-angular-directive-two /> 
</div>

来源

2016-05-13 11:44:41

我怎么可以添加指令动态页面按钮点击和追加功能......有可能吗？ –

AngularJS如何动态地添加/删除指令在页面时点击链接

回答

相关问题