Dynamically injecting a directive while compiling/linking another directive is a hairy business. You can't simply set the attribute because it won't be collected by Angular. Manual compilation wouldn't work either because it will cause infinite loop. That being said, if you have already decided that this is what you want :), here you go:
app.directive('hello', function($injector) {
return {
transclude: true,
replace: true,
restrict: "E",
template: "<div ng-transclude></div>",
compile: function(tele, tattrs) {
var ngShow = $injector.get("ngShowDirective")[0];
return function(scope, ele, attrs) {
attrs.$set("ngShow", (attrs.foo === "bar").toString());
ngShow.link(scope, ele, attrs);
}
}
}
});
The idea is to manually link the the ngShow
directive instead of relying on AngularJS to do that. Normally, only AngularJS invokes compile
and link
; plus, this code relies on the knowledge that ngShow
has a link
function. In general, it should be considered a hack and used with care.
Demo link