Angular1.x的自定义指令directive参数配置详细说明

简介: Angular1.x的自定义指令directive参数配置详细说明

Angular1.x的自定义指令directive参数配置详细说明

 


组件结构




angular-component-demo.html


<!DOCTYPE html>

<html lang="zh" ng-app="app">

<head>

   <meta charset="UTF-8">

   <title>自定义Angular1.x组件</title>

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

   <link rel="stylesheet" href="myComponent.css">

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

</head>

<body>

<my-component title="标题"><li>被替换内容</li></my-component>

</body>

</html>

myComponent.css


@charset "UTF-8";

/*这里设置组件的样式*/

h1 {

   color: red;

}

myComponent.js


var app = angular.module('app', []);

app.directive('myComponent', function () {

   return {

       restrict: "ECMA",//(字符串)可选参数,指明指令在DOM里面以什么形式被声明;取值有:E(元素),A(属性),C(类),M(注释),其中默认值为A;当然也可以两个一起用,比如EA.表示即可以是元素也可以是属性。

       priority: 0,//(数字),可选参数,指明指令的优先级,若在单个DOM上有多个指令,则优先级高的先执行;

       terminal: true,//(布尔型),可选参数,可以被设置为true或false,若设置为true,则优先级低于此指令的其他指令则无效,不会被调用(优先级相同的还是会执行)

       //【情况1】(字符串或者函数)可选参数,显示组件内容

       // template: '<div><h1>组件内容</h1></div>',

       //【情况2】一个函数,可接受两个参数tElement和tAttrs,其中tElement是指使用此指令的元素,而tAttrs则实例的属性,它是一个由元素上所有的属性组成的集合(对象)

       /*template: function(tElement,tAttrs){

           var html = '';

           html += '<div>' +'hello '+tAttrs.title+'</div>';

           return html;

       },*/

       templateUrl: 'myComponent.html',//(字符串或者函数),可选参数,可以是(1)一个代表HTML文件路径的字符串(2)一个函数,可接受两个参数tElement和tAttrs(大致同上)

       //(1)默认值false。表示继承父作用域;(2)true。表示继承父作用域,并创建自己的作用域(子作用域);(3){}。表示创建一个全新的隔离作用域;

       scope: {

           param: "@",//可以为@、&、=,其中=是双向绑定,&可以绑定方法函数名

       },

       transclude: true,//如果不想让指令内部的内容被模板替换,可以设置这个值为true,然后在template里面加入ng-transclude属性;如果指令使用了transclude参数,那么在控制器无法正常监听数据模型的变化了。建议在链接函数里使用$watch服务。

       controller: 'controllerName',//可以是一个字符串或者函数。若是为字符串,则将字符串当做是控制器的名字,来查找注册在应用中的控制器的构造函数

       controllerAs: 'controllerAsName',//控制器别名

       //compile和link选项是互斥的。如果同时设置了这两个选项,那么会把compile所返回的函数当作链接函数,而link选项本身则会被忽略。

       /*compile: function compile(tElement, tAttrs, transclude) {

           console.log(tElement, tAttrs, transclude);

           return {

               pre: function preLink(scope, iElement, iAttrs, controller) {

                   console.log(scope, iElement, iAttrs, controller);

               },

               post: function postLink(scope, iElement, iAttrs, controller) {

                   console.log(scope, iElement, iAttrs, controller);

               }

           }

       },*/

       link: function postLink(scope, iElement, iAttrs) {

           console.log("link",(scope, iElement, iAttrs));

       }

   };

});

//注意:在本地开发时候,需要运行一个服务器,不然使用templateUrl会报错 Cross Origin Request Script(CORS)错误。由于加载html模板是通过异步加载的,若加载大量的模板会拖慢网站的速度,这里有个技巧,就是先缓   存模板

app.run(["$templateCache", function ($templateCache) {

   $templateCache.put("myComponent.html", "<div><h1>组件内容</h1></div><div ng-transclude></div>");

}]);

app.controller('controllerName', function ($scope, $element, $attrs, $transclude, $log) {

   // console.log($log, $scope, $element, $attrs, $transclude);

   //控制器逻辑放在这里

});

相关文章
|
8月前
|
JavaScript
关于 Angular 应用部署时的 base-href 参数
关于 Angular 应用部署时的 base-href 参数
94 0
|
28天前
|
JavaScript 前端开发 应用服务中间件
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
31 0
|
28天前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
28天前
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
|
28天前
|
C++
【angular】启动项目和路由配置
【angular】启动项目和路由配置
24 1
|
28天前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
28天前
Angular启动/node_modules/@types/node/index.d.ts (20,1): Invalid ‘reference‘ directive syntax.
Angular启动/node_modules/@types/node/index.d.ts (20,1): Invalid ‘reference‘ directive syntax.
28 2
|
9月前
从 Angular Component 和 Directive 的实例化,谈谈 Angular forRoot 方法的命令由来
同 Angular service 的单例特性不同,Angular 组件和指令通常会被多次实例化,比如 HTML markup 中每出现一次 Component 的 selector,就会触发 Component 的一次实例化。
45 0
|
9月前
|
JavaScript IDE 开发工具
修改 Angular Component 构造函数参数被认为是 breaking change
修改 Angular Component 构造函数参数被认为是 breaking change
36 0
|
JavaScript
关于 Angular 应用部署时的 base-href 参数
关于 Angular 应用部署时的 base-href 参数
152 0