Angualr中自定义指令模板

超、凢脫俗 2022-06-10 03:30 184阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    </head>
    
    <body ng-app="demoApp">
      
      <div breadcrumb></div>
      <breadcrumb data=""></breadcrumb>
      <script src="bower_components/angular/angular.js"></script>
      <script> var demoApp = angular.module('demoApp', []); demoApp.directive('breadcrumb', [function() { // Runs during compile return { // 指定当前指令的类型什么样的 // restrict: 'EA', // // E = Element, A = Attribute, C = Class, M = Comment // template: '', // 模版字符串 templateUrl: 'tmpls/breadcrumb.html', replace: true, // transclude: true, }; }]); // demoApp.directive('btn', [function() { // return{ // scope:{ // primary:'@', // lg:'@', // block:'@', // }, // template:'<button class="btn { {primary==\'true\'?\'btn-primary\':\'\'}}">button</button>' // } // }]); // demoApp.directive('btn', [function() { // return { // // 指令对象的transclude必须设置为true才可以在模版中使用ng-transclude指令 // transclude: true, // replace: true, // 替换指令在HTML中绑定的元素 // template: '<button class="btn btn-primary btn-lg" ng-transclude></button>' // }; // }]); </script>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js 中的指令自定义是什么？如何自定义指令？

Vue.js 中的指令自定义是什么？如何自定义指令？ Vue.js是一种流行的前端框架，它提供了一种称为“指令”的技术，用于操作DOM元素。Vue.js中内置了一些常用的

r囧r小猫/ 2024年03月16日 13:25/ 0 赞/ 89 阅读

相关 vue自定义指令

示例：我们注册一个全局的v-focus指令 <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <

朱雀/ 2023年03月06日 03:56/ 0 赞/ 263 阅读

相关 Vue中directive自定义指令

![format_png][] 想必大家在使用`Vue`的时候，会经常用的`Vue`的一些指令。比如`v-model`、`v-on`、`v-bind`、`v-

朱雀/ 2023年02月16日 12:22/ 0 赞/ 230 阅读

相关在Vue中自定义指令

Vue中指令在定义的时候，名称前面不需要加 v- 前缀，在调用的时候，需要在指令名称前加上 v- 前缀来进行调用。自定义指令的注册分为全局自定义指令和局部指令。全局

偏执的太偏执、/ 2022年09月08日 15:44/ 0 赞/ 205 阅读

相关 Angualr中自定义指令模板

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

超、凢脫俗/ 2022年06月10日 03:30/ 0 赞/ 185 阅读

相关 Angular自定义指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

左手的ㄟ右手/ 2022年06月10日 02:52/ 0 赞/ 261 阅读

相关自定义指令

前言除了 AngularJS 内置的指令外，我们还可以创建自定义指令。通过 .directive() 函数来添加自定义的指令。调用自定义指令时，需要在H

秒速五厘米/ 2022年06月05日 12:08/ 0 赞/ 266 阅读

相关自定义指令

<!DOCTYPE html> <html> <head> <title></title> <script type="text/j

小咪咪/ 2022年06月02日 10:50/ 0 赞/ 286 阅读

相关 Vue中的自定义指令

目录一，自定义指令-钩子函数二，自定义指令-钩子函数参数 -------------------- 一，自定义指令-钩子函数自定义指令：除了内置指令，

你的名字/ 2021年07月25日 17:29/ 0 赞/ 498 阅读

相关 AngularJs 自定义指令

自定义指令类似创造一个组件(标签),使得多个页面引用相同内容自定义创建 app页面数据模型.directive()来创建的;

曾经终败给现在/ 2021年07月25日 01:33/ 0 赞/ 496 阅读