从html创建一个指令，该指令按类名应用函数

Create a directives from html which apply function by class name

本文关键字：指令 函数 应用 一个 创建 html      更新时间：2023-09-26


请告诉我如何从使用jQuery插件重写这些代码到与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>

当在AngularJS中运行应用程序时，此代码将被放在"视图"HTML文件中。谢谢

我为您的问题添加了plunkr。请参阅以下链接http://plnkr.co/edit/n571gvlq7ptlbfJbOgaT?p=preview

代码

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>

代码将被放入html视图

<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'
  };
});

您可以使用自定义指令将temple添加到html页面。请参阅以下链接了解如何实现自定义指令。

创建包装其他元素的指令

相关文章：