javascript - Accessing angular directive (element)'s text inside the template -
so following this egghead.io tutorial on custom components, , came across problem. when declaring directive such as:
angular.module('myapp', []) .directive('mydir', function(){ return { restrict: "e", controller: "mycontroller", link: function(scope, element, attrs) { scope.foo = element.text(); }, templateurl: "mydirtemplate.html" } }); and template being:
<div>the value is: {{foo}}</div> and directive being used such follows:
<html> ... <mydir>bar</mydir> ... </html> element in link function refers
<div>the value is: {{foo}}</div> in template. if don't specify templateurl, element refers
<mydir>bar</mydir> in main view, want. hoping directive take "bar" text , insert {{foo}}, giving final result of:
<div>the value is: bar</div> but don't know how around angular selecting template's element every single time.
any ideas?
you need use ngtransclude:
app.directive('mydir', function(){ return { restrict: "e", transclude: true, templateurl: "mydirtemplate.html", replace: true } }); and external template becomes similar to:
<div>the value is: <span ng-transclude></span></div> view code working here: http://plnkr.co/edit/eut5ulgyxgm8d54ptpor?p=preview
Comments
Post a Comment