directive

angularJS directive用法详解

由 落花浮王杯 提交于 2020-02-29 06:21:57
前言 最近学习了下angularjs指令的相关知识，也参考了前人的一些文章，在此总结下。 欢迎批评指出错误的地方。 Angularjs指令定义的API AngularJs的指令定义大致如下 angular.module("app",[]).directive("directiveName",function(){ return{ //通过设置项来定义 }; })其中return返回的对象包含很多参数，下面一一说明 你知道用AngularJs怎么定义指令吗？0 1.restrict （字符串）可选参数，指明指令在DOM里面以什么形式被声明； 取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A； E(元素)：<directiveName></directiveName> A(属性)：<div directiveName='expression'></div> C(类)： <div class='directiveName'></div> M(注释)：<--directive:directiveName expression--> 你知道用AngularJs怎么定义指令吗？1 例如restrict：‘EA’ 则表示指令在DOM里面可用元素形式和属性形式被声明； 一般来说，当你创建一个有自己模板的组件的时候，需要使用元素名，如果仅仅是为为已有元素添加功能的话，就使用属性名

vue自定义指令directive

由 社会主义新天地 提交于 2020-02-22 14:44:15
全局自定义指令：Vue.directive() 局部自定义指令：directives directive(参数一,参数二) 参数一：指令名称 参数二：指令的配置项，可以是函数，也可以是对象 函数： 参数一：使用当前指令的元素 参数二：指令的详细信息 { modifiers:修饰符（只要自定义指令后面跟了修饰符，modifiers对象中就有值，为true）, value:指令的值（假设指令这样写：<div v-test="'aaa'"></div>，那么value就是aaa） } 指令的作用：操作DOM元素 步骤： ①src下新建utils/utils.js： import Vue from "vue"; /** * v-test指令： * <div v-test="'发发发'"></div> * 相当于 * <div>发发发</div> * */ Vue.directive("test",(el,{value})=>{ el.innerText=value; }); /** * 设置背景颜色的指令 * */ Vue.directive("backgroundColor",(el,{value,...rest})=>{ el.style.backgroundColor=value; }); /** * 阻止浏览器默认事件：v-event.prev * */ Vue.directive

c 常见错误

由 家住魔仙堡 提交于 2020-02-10 07:48:50
."c" not an argument in function sum 该标识符不是函数的参数 2.array bounds missing ] in function main 缺少数组界限符 "]" 3.Array size too large in function main 数组规模太大 4.bad file name format in include directive 在包含指令中的文件名格式不正确. 5.Call of non-function in function main 调用未经过定义的函数. 6.cannot modify a const object in function main 对常量不能进行修改. 7.character constant too long in function main 字符常量太大 8.constant expression required in funtion main 数组定义的时候,数组大小要求是常数 9.compound statment missing } in function main 复合语句漏掉符号 "{" 10.declaration syntax error in function main 宣告语法错误 11.expression syntax in function main 表达式语法错误

Vue(九)---自定义指令(directive )

由 吃可爱长大的小学妹 提交于 2020-02-03 14:49:41
1.无参数 自定义指令的方式： 1. 使用Vue.directive 来自定义 2. 第一个参数就是 指令名称 xart 3. el 表示当前的html dom对象 4. 在方法体内就可以通过 innerHTML style.color 等方式操控当前元素了 <body> <div id="app"> <div v-xxx> 商店 </div> </div> <script type="text/javascript"> Vue.directive('xxx',function(el){ el.innerHTML = el.innerHTML + ' ------------ ' el.style.color = 'blue' }) new Vue({ el:'#app' }) </script> </body> 2.有参数： <body> <div id="app"> <div v-xxx='{color:"red"}'> 商店 </div> </div> <script type="text/javascript"> Vue.directive('xxx', function (el,binding) { el.innerHTML = el.innerHTML + '( ' + binding.value.color + ' )' el.style.color =

angularjs 指令详解 - template, restrict, replace

由 女生的网名这么多〃 提交于 2020-02-03 11:19:32
通过指令机制，angularjs 提供了一个强大的扩展系统，我们可以通过自定义指令来扩展自己的指令系统。 怎样定义自己的指令呢？ 我们通过 Bootstrap UI 来学习吧。这个项目使用 angularjs 将 Bootstrap 3 进行了封装，是我们学习 angularjs 很好的样例。 从 Alert 开始 首先，我们从比较简单的 alert 指令来开始学习。 在 Bootstrap 中，警告框使用类 alert 来表示, 通过 alert-success， alert-info， alert-warning, alert-danger 来表示不同类型的警告。 <div class="alert alert-success">...</div> <div class="alert alert-info">...</div> <div class="alert alert-warning">...</div> <div class="alert alert-danger">...</div> 对于可关闭的警告框来说，还可以用一个可选的.alert-dismissable和关闭按钮，但是，这是通过脚本来实现的，在 bootstrap ui 这里没有使用。 <div class="alert alert-warning alert-dismissable"> <button

Angularjs - directive

由 孤街浪徒 提交于 2020-02-02 08:02:00
1. What are Directives Directives are one of the most powerful features of AngularJS. You can imagine them as building blocks ( aka re-usable components ) of any AngularJS application. Mastering all the directives, is totally out of this article’s scope. For that, I would really recommend this book ; it covers everything you need to know about directives. Here, we’ll discuss one aspect of directives called : “ Directive scope ”. var app = angular.module("test",[]); app.directive("myDirective",function(){ return { restrict: "EA", scope: true, link: function(scope,elem,attr){ // code goes here .

Angularjs directive

由 一个人想着一个人 提交于 2020-02-02 06:42:16
.directive('mydir',function(){ return{ multiElement: true/false, priority: number, //default: 0 terminal: true/false, scope: false/true/{ myattr: '=attr', myattr2: '@str', myattr3: '&fun' }, bindToController: true/false, controller: function($scope,$element,$attrs,$transclude){ $transclude([scope], cloneLinkingFn, futureParentElement) /*$transclude(function(clone, scope) { element.append(clone); transcludedContent = clone; transclusionScope = scope; });*/ }, //default: /'?dirName'/ require: 'dirName'/'?dirName'/'^dirName'/'^^dirName'/'?^dirName'/'?^^dirName', controllerAs: 'string', restrict:

19angular1中的directive

由 妖精的绣舞 提交于 2020-02-02 05:08:28
注意：1、在分页组件中，从后台获取总项数，触发改造函数，获取改造后的总项数，分页组件重载。组件不重载的情况：没有触发改造函数；解决办法是：$scope.$watch('总项数', function (nl) {执行改造函数})。2、分页组件的展示逻辑：（1）以当前页为中心，根据当前页的大小，展示左侧；（2）以最大值与当前页的差值为中心，根据差值的大小，展示右侧。 一、自定义标签1、在JS里，使用驼峰命名法来命名，如：myDirective；在html页面调用该指令时需要以 - 分割，如： my-directive。2、在自定义组件中，template，构成DOM，（1）compile，生成DOM、监听DOM、修改呈现内容，（2）controller：用来提供可在指令间复用的行为，（3）link，在compile后操作DOM，需要用scope.$apply(scope.doSomething())调用scope.doSomething()。 if (that.alertHtml && that.alertMethod) { that.alertScope = $rootScope.$new(); angular.extend(that.alertScope, that.alertMethod); angular.element(document.getElementById('

vue项目中使用vue-directive-image-previewer插件进行图片放大处理

由 女生的网名这么多〃 提交于 2020-01-28 03:09:25
安装vue-directive-image-previewer插件 npm install vue - directive - image - previewer -- save 在vue项目中的main.js中引入并注册 import VueDirectiveImagePreviewer from 'vue-directive-image-previewer' import 'vue-directive-image-previewer/dist/assets/style.css' Vue . use ( VueDirectiveImagePreviewer , { zIndex : 9999 , //层级显示 previewSize : 3 //三倍图 } ) 使用（使用指令v-image-preview） < img v-for = " (item,index) in form.imgList " :key = " index " :src = " item " alt = " " v-image-preview = " item " > 来源： CSDN 作者： lt要努力 链接： https://blog.csdn.net/louting249/article/details/103734181

AngularJS two-way data binding not working properly in directive

由 纵饮孤独 提交于 2020-01-24 00:29:08
问题 i am trying to implement radio-button list using ng-repeat. typeList.html <div ng-repeat="type in types" > <input type="radio" id={{type.id}} name="{{type.name}}" ng-model="result" ng-value="type.id" > {{type.name}} <div> Result {{result}} </div> //result is changing only in the row of clicked radio-button. It should change in every row.(two way data-binding). </div> Directive: angular.module('app').directive('myList',function(){ return{ restrict: 'A', scope: { types: '=', //here list is
订阅 directive