How do I dynamically add an AngularJS directive to an element conditionally?
Question
So I can't really get this to work, I've got the following code
HTML:
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
{{vt.t}}
<div my-directive="{{vt.t}}"></div>
{{vt.f}}
<div my-directive="{{vt.f}}"></div>
<hr />
{{vt.t}}
<div ng-class="{'my-directive': vt.t}"></div>
{{vt.f}}
<div ng-class="{'my-directive': vt.f}"></div>
<hr />
<div class="my-directive"></div>
<div class="nodirectiveclass"></div>
</body>
</html>
JavaScript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.vt = { t: true, f: false };
});
app.directive('myDirective', function($compile) {
return {
restrict: 'AC',
template: '<div>Directive on</div>',
replace: true
};
});
Plunker: http://plnkr.co/edit/7cJKhIuNqnsk1CkczjoE?p=preview
As you see the classes doesn't trigger the directive when added dynamically but works fine in my last "static" example. I also tried setting the directive attribute to true or false but that didn't seem to help.
1 answers
solution1
0 2014-07-30 11:26:53
I think you should use model variable in your directive. Then you can access what ever the value you want easily.
Refer this Answer: AngularJS - Create a directive that uses ng-model
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.