angular组件开发
项目中经常会有一些公共组件,比如header,如果每个页面都写一遍的话显得很冗余,而且不利于维护,这时候我们就会考虑将这些公共部分抽取出来,做成一个单独的组件。 然而angular不是很熟悉啊~怎么啵~ 折腾了一下,才发现angular的组件开发主要依赖自定义指令(directive )来实现。 主要使用到directive的几个属性,如下: restrict: 使用驼峰法来命名,用来限制指令通过特定的方式来调用,默认值为 EA
scope: 指定作用域
templateUrl: 用来指定模板文件的url,如templateUrl: 'header' template:设置模板,如template:'这是一条指令' controller:控制器 比如如果创建一个header组件,我们先新建一个文件夹header.html <header> <h1>这里是标题</h1> <div class="goback" ng-touchstart="goBack($event)">返回</div> <div>这里是右边的文字</div> </header> 接着新建directive.js angular.module('myHeader',["zz.rule"]) .directive('myHeader',function() { return { restrict: 'A',templateUrl: 'header',controller: function($scope,$element,$attrs) { // 返回上一页 $scope.goBack = function(event) {}; } }; }) 好了,到这里一个组件就穿件好了,那么问题来了,怎么使用呢? 其实就跟平成引入插件一样一样的 创建index.html <div zz-header></div> angular.module('mymodel',["myHeader"]) 超级简单有没有,赶紧get起来 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |