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