angularjs - How can I use an {{expression}} in (or as) the name of a directive? -
i have 2 class-restricted directives, named foothing , barthing.
i have variable, baz, in template scope set either foo or bar.
how can utilize scope variable in name of directive element?
when <div class="{{baz}}-thing"></div>, {{baz}} replaced properly, directive not loaded.
when <div class="foo-thing"></div>, directive loaded properly.
i have hunch has angular's digest/compile cycle, i'm afraid don't know how work around it.
how can angular compile part of template first look evaluated, , have compile again recognizes directive?
for work template have first compiled , executed on scope (to replace {{baz}}), , compiled , executed 1 time again "foo-thing" directive going. it's possible, cause other issues.
what create sort of directive factory, directive creates directive. here's example:
<!doctype html> <html ng-app="myapp"> <head> <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script> <script type="text/javascript"> var myapp = angular.module("myapp", []); myapp.directive('factory', function($compile) { homecoming { restrict: 'a', scope: { type: '=factory' }, replace: true, link: function($scope, elem, attrs) { var compiled = $compile('<'+ $scope.type +'></'+ $scope.type +'>')($scope); elem.append(compiled); } }; }); myapp.directive('concrete', function() { homecoming { restrict: 'e', template: "<div>i'm concrete!</div>", link: function($scope, elem, attrs) { } }; }); function myctrl($scope, $timeout) { $scope.directivetype = "concrete"; } </script> </head> <body> <div ng-controller="myctrl"> <div factory="directivetype"></div> </div> </body> </html> angularjs angularjs-directive
No comments:
Post a Comment