angular组件开发

2024年1月3日 107次阅读 来源: lynneshow

项目中经常会有一些公共组件，比如header，如果每个页面都写一遍的话显得很冗余，而且不利于维护，这时候我们就会考虑将这些公共部分抽取出来，做成一个单独的组件。

然而angular不是很熟悉啊~怎么啵~

折腾了一下，才发现angular的组件开发主要依赖自定义指令（directive ）来实现。

主要使用到directive的几个属性，如下：

restrict： 使用驼峰法来命名，用来限制指令通过特定的方式来调用，默认值为 EA

  • E 作为元素名使用，如<my-directive></my-directive>

  • A 作为属性使用,如<div my-directive></div>

  • C 作为类名使用,如<div class=”my-directive”></div>

  • M 作为注释使用,如<!– directive: my-directive –>

scope: 指定作用域

  • false 默认值，共享父级作用域

  • true 继承父级作用域并创建指令自己的作用域

  • {} 创建指令自己的独立作用域，与父级毫无关系

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起来

    原文作者：lynneshow
    原文地址: https://segmentfault.com/a/1190000009040124
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞