Create a directives from html which apply function by class name

Question

Please show me how to re-write these code from using jQuery plugin to directive to use with AngularJs:

<div class="fotorama" data-nav="thumbs" data-allowfullscreen="1" data-thumbheight="100" data-thumbwidth="100">
   <img src="img/gamer_chick_800x600.jpg" alt="Image Alternative text" title="Gamer Chick" />
   <img src="img/amaze_800x600.jpg" alt="Image Alternative text" title="AMaze" />
   <img src="img/urbex_esch_lux_with_laney_and_laaaaag_800x600.jpg" alt="Image Alternative text" title="Urbex Esch/Lux with Laney and Laaaaag" />
   <img src="img/food_is_pride_800x600.jpg" alt="Image Alternative text" title="Food is Pride" />
</div>

This code will be put in a 'views' HTML files when run the app in AngularJS. Thanks.

Hope the following link will help you http://stackoverflow.com/questions/9381926/insert-html-into-view-using-angularjs — Jeeva J, Apr 10 '15 at 10:07
Please refer the angularjs link for this one.. https://docs.angularjs.org/guide/directive — Jeeva J, Apr 10 '15 at 10:10
Thank you, but I have tried some ways, no way works as I expect. — Huy Do, Apr 10 '15 at 10:22
My problem is when the directives is loaded, It renders HTML files before the html content is filled by ng-repeat. So there's no effect run. — Huy Do, Apr 10 '15 at 10:46
Could you elaborate your problem and how are you implemented? This will help us to identify the correct solution. — Jeeva J, Apr 10 '15 at 10:51
All you have shown is a block of html. What exactly are you wanting the directive to do? you need to put a little more effort into your questsions here so the problem is clear as well as steps you've tried to resolve problem — charlietfl, Apr 10 '15 at 11:26

score -1 · Answer 1 · answered Apr 10 '15 at 10:50

I've added plunkr for your question. Please refer the following link http://plnkr.co/edit/n571gvlq7ptlbfJbOgaT?p=preview

Code

Main html

<!DOCTYPE html>
<html ng-app="docsIsolationExample">

  <head>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>

    <script src="example.js"></script>

  </head>

  <body>
    <div ng-controller="Controller">
  <my-customer ></my-customer>
</div>
  </body>

</html>

Code will be put into the html views

<div class="fotorama" data-nav="thumbs" data-allowfullscreen="1" data-thumbheight="100" data-thumbwidth="100">
   <img src="img/gamer_chick_800x600.jpg" alt="Image Alternative text" title="Gamer Chick" />
   <img src="img/amaze_800x600.jpg" alt="Image Alternative text" title="AMaze" />
   <img src="img/urbex_esch_lux_with_laney_and_laaaaag_800x600.jpg" alt="Image Alternative text" title="Urbex Esch/Lux with Laney and Laaaaag" />
   <img src="img/food_is_pride_800x600.jpg" alt="Image Alternative text" title="Food is Pride" />
</div>

JS

angular.module('docsIsolationExample', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
  $scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };
}])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerInfo: '=info'
    },
    templateUrl: 'my-customer-plus-vojta.html'
  };
});

You can use custom directive to add temple to the html page. Please refer the following link to know how to implement custom directive.

Creating a Directive that Wraps Other Elements

Might as well have just used `ng-include` for no more than what your directive is doing — charlietfl, Apr 10 '15 at 11:30
He needed solution to implement directive for the template. So provided — Jeeva J, Apr 10 '15 at 11:38

Create a directives from html which apply function by class name

1 Answers1