Angularjs directive add directives as attribute and bind them dynamically
Question
Hi i am working on directive where i need to edit DOM add ng-src attribute and a model to it.
This is my DOM
<edit-component>
<img src="images/logo.png" title="Hearty Wear" />
</edit-component>
I need the result DOM be
`<div>
<img src="images/logo.png" title="Hearty Wear" ng-src={{myModel}} />
</div> `
Such that when i update myModel with data the image should be updated
UPDATE
sam.directive('editComponent', function() { return { restrict: 'EA', transclude: true, replace: true, templateUrl: "imageTemplate.html", link: function(scope, element, attb, ctrl, transclude) { scope.data = function() { var imagedata; imagedata = arguments[5]; scope.imageModel = imagedata.base64; return element.find('img').attr('src', "data:image/png;base64," + imagedata.base64); }; } }; });
I need the previous src attribute value also to display the existing image.
Right now im updating the src attribute manually.I need solution where i can update via model variable
Thanks
2 answers
solution1
4 ACCPTED 2015-08-28 06:38:21
After a long reading of documentation about AngularJS Directives in various blogs and sites.
I just came to know complete flow of directives
The flow will be from
Compile -> Controller -> preLink -> postLink or (Link)
If you want add any core Directives of angular(ng-model, ng-style,ng-src) at Compile Phase
var app; app = angular.module('App', []); app.directive('myDirective', [ '$compile', function($compile) { // Crucial Part return { scope: true, compile: function(element, attrs) { element.attr('ng-src', '{{imageModel}}'); element.attr('ng-click', 'updateImage()'); element.removeAttr('my-directive'); // Crucial Part return { pre: function(scope, ele, attb) {}, post: function(scope, ele, attb) { $compile(ele)(scope); return scope.updateImage = function() { return scope.imageModel = "http://www.google.com/logos/doodles/2015/halet-cambels-99th-birthday-6544342839721984-hp2x.png"; }; } }; }, controller: function($scope, $element, $attrs) { return $scope.imageModel = null; } }; } ]);
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> <style> img { max-width: 100%; } </style> </head> <body ng-app='App'> <img src="https://www.google.co.in/images/srpr/logo11w.png" alt="" my-directive> </body> </html>
I will explain the necessary steps involved in it .
First phase (Compile) :-
Add the core angular directives or custom directives you want in this phase by
element.attr('ng-src', '{{imageModel}}'); // For dynamic image url changes
element.attr('ng-click', 'updateImage()'); // The trigger to update image
element.removeAttr('my-directive'); // **Crucial step please remove your custom directive attribute**
If you dont remove your Custom directive during $compile() it will loop infinite times
Second phase (Controller):-
Define all your models needed and function in these phase (I know i have defined updateImage() in postLink . It also works!)
$scope.imageModel = null // Initialization
Third phase (link) :- The order is first preLink and then postLink . I haven't defined anything in the prelink.
postLink :- $compile(element)(scope) . This will actually bind compile all the directives involved in the element and it binds them dynamically.(vola). Everything works as desired.
Thanks. If you feel i have missed some points or misunderstood the concept, feel free to update it.
JSBin link https://jsbin.com/parote/edit?html,js,output
solution2
1 2015-08-25 12:22:16
Try
<img ng-if="!myModel" src="images/logo.png" title="Hearty Wear"/>
<img ng-if="myModel" src="{{ myModel }}" title="Hearty Wear"/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.