angularjs - Manipulating meta tags with data from controller in different scope -
i have angularjs application need update few meta tags (for fb sharing) based on info controller gets service.
right doing in itemcontroller when controller gets info service:
angular.element('head').find('#metafbimage').attr('content', $scope.item.imageurl); this bad , want in directive. cannot figure out nice way it. far have 2 alternatives:
1) directive on head tag. when itemcontroller gets info service want phone call function in directive changes meta tags. how can controller phone call function different scope ( outside itemcontroller)?
2) service injected itemcontroller, , service changes meta tags. improve (and workable) solution. ok manupulate dom elements in service in cases these?
edit: chose refactor using $rootscope in controller, , watching $rootscope in directive on head. sense somewhere between acceptable , bad practice. ideas?
use approach.
create service (factory) parameters such `
angular.module("myapp").factory("ogfactory", function(){ var ogfactory = { title : "", description : "", ... }; homecoming ogfactory; }); set ng-app on <html> element <html ng-app="your_app_name"> <head> block can access items within ng-app.
inject ogfactory controller. inject $run block , set on $rootscope $rootscope.ogfactory = ogfactory.
after controller has done whatever needs (if async), set ogfactory.title , ogfactory.description.
in <head> section, include meta tags such as: <meta name="og:title" content="{{ogfactory.title}}">
the controller set ogfactory properties , rootscope reflect them.
note, however, facebook not wait javascript done processing in order fetch page results, {{title}} (literally) "{{title}}" unless utilize service prerender.io. method works great prerender.
angularjs dom service controller directive
No comments:
Post a Comment