从指令中向元素添加 ng-if 属性 [英] Add ng-if attribute to a element from within a directive
问题描述
我有一个 AngularJS 指令，它接受一个 ID 并在这个 ID 上进行查找，以获得给定 flexbox 元素的 col-width、hide-state 和 order.
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.
我想做的是在元素的隐藏状态为真时为其添加一个 ng-if=false 属性.有什么办法，如何将指令中的 ng-if 属性添加到元素?
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?
我当前的代码:
.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，元素仍然呈现并可见.
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?
提前致谢.
问候
推荐答案
如下所示:
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 );
};
}
};
});
工作 plunk 是 这里
working plunk is here
更新
这是您要求的简单示例.
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>希望对你有帮助.
这篇关于从指令中向元素添加 ng-if 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
