分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

angularjs directive 属性 问题

发布时间:2023-09-06 01:35责任编辑:董明明关键词:js
angular.module(‘docsTransclusionExample‘, [])
.controller(‘Controller‘, [‘$scope‘, function($scope) {
?$scope.name = ‘Tobias‘;
}])
.directive(‘myDialog‘, function() {
?return {
???restrict: ‘E‘,
???transclude: true,
???scope: {},
???templateUrl: ‘my-dialog.html‘,
???link: function (scope, element) {
?????scope.name = ‘Jeff‘;
???}
?};
});

首先我们先来聊聊你列出的directive中的几个属性:
?1. restrict
E: 表示该directive仅能以element方式使用,即:<my-dialog></my-dialog>
A: 表示该directive仅能以attribute方式使用,即:<div my-dialog></div>
EA: 表示该directive既能以element方式使用,也能以attribute方式使用
?2. transclude
你的directive可能接受页面上的其他html内容时才会用到,建议你先去掉该参数。有些高阶了。
?3. scope
当你写上该属性时,就表示这个directive不会从它的controller里继承$scope对象,而是会重新创建一个。
?4. templateUrl
你的directive里的html内容
?5. link
可以简单理解为,当directive被angular 编译后,执行该方法
这里你说的没错,link中的第一个参数scope基本上就是你说的上面写的那个scope。
element简单说就是$(‘my-dialog‘)
attrs是个map,内容是你这个directive上的所有属性,例如:你在页面上如果这样写了directive:
<my-dialog type="modal" animation="fade"></my-dialog>

那attrs就是:
{
type: ‘modal‘,
animation: ‘fade‘
}

angularjs directive 属性 问题

原文地址:https://www.cnblogs.com/xinweiqu/p/8241902.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved