angular组件开辟

2024年2月18日 191次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞