Angularjs 创建可复用组件实例代码

2024-12-02 21:25:15

AngularJS框架可以用Service和Directive降低开发复杂性。这个特性非常适合用于分离代码，创建可测试组件，然后将它们变成可重用组件。

Directive是一组独立的JavaScript、HTML和CSS，它们封装了一个特定的行为，它将成为将来创建的Web组件的组成部分，我们可以在各种应用中重用这些组件。在创建之后，我们可以直接通过一个HTML标签、自定义属性或CSS类、甚至可以是HTML注释，来执行一个Directive。

这一篇教程将介绍如何创建一个‘自定义步长选择' Directive，它可以作为一个可重用输入组件。本文不仅会介绍Directive的一般创建过程，还会介绍输入控件验证方法，以及如何使用ngModelController无缝整合任意表单，从而利用AngularJS表单的现有强大功能。

直接上代码：

html：

<!-- lang: html -->
<body ng-app="demo" ng-controller="DemoController">
  <form name="form" >
    Model value : <input type="text" size="3" ng-model="rating"><br>
    Min value: <input type="text" size="3" ng-model="minRating"><br>
    Max value: <input type="text" size="3"ng-model="maxRating"><br>
    Form has been modified : {{ form.$dirty }}<br>
    Form is valid : {{ form.$valid }}
    <hr><divmin="minRating"max="maxRating"ng-model="rating"rn-stepper></div></form></body>

js：

<!-- lang: js -->
angular.module(‘demo‘, [
  ‘revolunet.stepper‘
])

.controller(‘DemoController‘, function($scope) {
  $scope.rating = 42;
  $scope.minRating = 40;
  $scope.maxRating = 50;
});

rn-stepper最简结构

<!-- lang: js -->
// we declare a module name for our projet, and its dependencies (none)
angular.module(‘revolunet.stepper‘, [])
// declare our naïve directive
.directive(‘rnStepper‘, function() {
  return {
    // can be used as attribute or element
    restrict: ‘AE‘,
    // which markup this directive generates
    template: ‘<button>-</button>‘ +
            ‘<div>0</div>‘ +
            ‘<button>+</button>‘
  };
});

现在directive rnStepper 已经有了一个简单的雏形了。

可以有如下两种试用方法：

demo: http://jsfiddle.net/revolunet/n4JHg/

添加内部动作

直接上代码：

<!-- lang: js -->
.directive(‘rnStepper‘, function() {
  return {
    restrict: ‘AE‘,

    // declare the directive scope as private (and empty)
    scope: {},

    // add behaviour to our buttons and use a variable value
    template:
        ‘<button ng-click="decrement()">-</button>‘ +
        ‘<div>{{value}}</div>‘ +
        ‘<button ng-click="increment()">+</button>‘,

    // this function is called on each rn-stepper instance initialisation
    // we just declare what we need in the above template
    link: function(scope, iElement, iAttrs) {
      scope.value = 0;
      scope.increment = function() {
        scope.value++;
      };
      scope.decrement = function() {
        scope.value--;
      };
    }
  };
});

我们在template中，分别给两个button添加了click事件响应，在link方法中实现了响应的方法。
这里的scope是一个private scope，其作用域仅限rnStepper这个directive。

demo： http://jsfiddle.net/revolunet/A92Aw/

与外部世界（外部作用域）的交互

直到上面为止，我们的rnStepper都是自己跟自己玩，并没有跟外部作用域进行一些交互。

下面我们将添加一个数据绑定，使rnStepper与外部世界建立联系。

直接上代码：

<!-- lang: js -->
scope: {
  value: ‘=ngModel‘
}

我们在scope中添加了一组键值对，这样，会自动建立内部变量value与外部属性ngModel的联系。
这里的=代表的意思是双向绑定（double data-binding）。

什么叫双向绑定?

即：当value发生改变，那么ngModel也会发生改变，反之亦然。

在我们的这个demo中，看下面这行代码：

<div rn-stepper ng-model="rating"></div>

这里的意思就是： directive rnStepper的内部变量value与外部scope中的rating建立了双向数据绑定。

demo: http://jsfiddle.net/revolunet/9e7Hy/

让我们组件更加友好

直接上代码：

<!-- lang: js -->
.directive(‘rnStepper‘, function() {
  return {
    // restrict and template attributes are the same as before.
    // we don‘t need anymore to bind the value to the external ngModel
    // as we require its controller and thus can access it directly
    scope: {},
    // the ‘require‘ property says we need a ngModel attribute in the declaration.
    // this require makes a 4th argument available in the link function below
    require: ‘ngModel‘,
    // the ngModelController attribute is an instance of an ngModelController
    // for our current ngModel.
    // if we had required multiple directives in the require attribute, this 4th
    // argument would give us an array of controllers.
    link: function(scope, iElement, iAttrs, ngModelController) {
      // we can now use our ngModelController builtin methods
      // that do the heavy-lifting for us

      // when model change, update our view (just update the div content)
      ngModelController.$render = function() {
        iElement.find(‘div‘).text(ngModelController.$viewValue);
      };

      // update the model then the view
      function updateModel(offset) {
        // call $parsers pipeline then update $modelValue
        ngModelController.$setViewValue(ngModelController.$viewValue + offset);
        // update the local view
        ngModelController.$render();
      }

      // update the value when user clicks the buttons
      scope.decrement = function() {
        updateModel(-1);
      };
      scope.increment = function() {
        updateModel(+1);
      };
    }
  };
});

这里，我不在需要内部变量value了。因为我们在link方法中已经拿到了ngModelController的引用，这里的ngModelController.$viewValue其实就是前面例子中的value。

但是我们又添加了另外一组键值对require: ‘ngModel‘。

我们使用了两个新的API：

ngModelController.$render: 在ngModel发生改变的时候框架自动调用，同步$modelValue和$viewValue，即刷新页面。

ngModelController.$setViewValue：当$viewValue发生改变时，通过此方法，同步更新$modelValue。
demo: http://jsfiddle.net/revolunet/s4gm6/

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

angular2倒计时组件使用详解

项目中遇到倒计时需求,考虑到以后在其他模块也会用到,就自己封装了一个组件.便于以后复用. 组件需求如下: - 接收父级组件传递截止日期 - 接收父级组件传递标题组件效果变量组件countdown.html代码 <div class="count-down"> <div class="title"> <h4> {{title}} </h4> </div> <div class="body
Angular2自定义分页组件

在项目中,前端传给后台的参数有: pageSize:每页的条数 pageNo:当前页码比如当前是第1页,每页20条,则后台返回第1页的20条记录(sql应该是用limit去获取分页数据) 同时,后台接口还会返回列表的总条数totalNum,前端根据totaNum/pageSize计算总共有多少页如图: 注意事项: 需要先配置好路由(Angular2路由与导航) 使用步骤: (1)在项目中引入分页组件 // app.module.ts import { BrowserModule } from
Angular 2父子组件数据传递之@Input和@Output详解(下)

前言之前已经给大家介绍了Angular 2父子组件数据传递之@Input和@Output的相关内容,下面这篇文章我们再进一步的进行介绍: 子组件向父组件传递数据使用事件传递是子组件向父组件传递数据最常用的方式,子组件需要实例化EventEmitter类来订阅和触发自定义事件第一步定义子组件 childenComponent.ts (1).实例化EventEmitter,赋值给event,event被@Output装饰器定义为输出属性,这样event具备了向上级传递数据的能力,通过调用Even
Angular 2父子组件数据传递之@ViewChild获取子组件详解

前言之前在<Angular 2父子组件数据传递之局部变量获取子组件其他成员>讲到过(如果有不懂的,可以先去看看),通过在子组件模版上设置局部变量的方式获取子组件的成员变量,但是有一个限制,必须在父组件的模版中设置局部变量才能够获取到子组件成员.那有没有办法实现不依赖于局部变量获取子组件成员呢? 答案:肯定是有的,接下来我们讲下通过@ViewChild来实现! 淡描@ViewChild @ViewChild的作用是声明对子组件元素的实例引用,意思是通过注入的方式将子组件注入到@ViewChil
详解angular2封装material2对话框组件

1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍.这里提供一个方案用于封装我们最常用的alert和confirm组件. 2. 官方使用方法之alert ①编写alert内容组件 @Component({ template : `<p>你好</p>` }) export class AlertComponent { constructor(){ } } ②在所属模块上声明 //必须声明两处 declarations: [ AlertComp
Angular2学习教程之组件中的DOM操作详解

前言有时不得不面对一些需要在组件中直接操作DOM的情况,如我们的组件中存在大量的CheckBox,我们想获取到被选中的CheckBox,然而这些CheckBox是通过循环产生的,我们无法给每一个CheckBox指定一个ID,这个时候可以通过操作DOM来实现.angular API中包含有viewChild,contentChild等修饰符,这些修饰符可以返回模板中的DOM元素. 指令中的DOM操作 @Directive({ selector: 'p' }) export class TodoD
angular4自定义组件详解

在 Angular 中,我们可以使用 {{}} 插值语法实现数据绑定. 新建组件 $ ng generate component simple-form --inline-template --inline-style # Or $ ng g c simple-form -it -is # 表示新建组件,该组件使用内联模板和内联样式 //会自动为simple-form生成simple-form.component.ts文件,文件中的selector为:app-simple-form,自动添加了a
详解Angular 4.x 动态创建组件

动态创建组件这篇文章我们将介绍在 Angular 中如何动态创建组件. 定义 AlertComponent 组件首先,我们需要定义一个组件. exe-alert.component.ts import { Component, Input } from '@angular/core'; @Component({ selector: "exe-alert", template: ` <h1>Alert {{type}}</h1> `, }) export cl
Angular2开发——组件规划篇

本文集中讲讲笔者目前使用ng2来开发项目时对其组件的使用的个人的一些拙劣的经验. 先简单讲讲从ng1到ng2框架下组件的职责与地位: ng1中的一大特色--指令,分为属性型.标签型.css类型和注释型.其中写在css类以及注释中的组件想必多数人都不会去使用,而属性型指令与标签型指令则是ng1火遍宇宙的功臣之一.在ng2中,标签型指令干脆被分离出来,追随vue等新兴势力的风格升级并称为组件,并用来处理所有与视图(DOM)打交道的事情,包括展示数据与动画.而属性型指令则用于完善组件的功能,比如接收用
Angular2利用组件与指令实现图片轮播组件

前言如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图. 而除了直接看的见的躯体之外,一个完整的"生物"还需要有感觉器官,用来感知外界与其的交互,这就是指令要做的事情. 本文将使用Angular2提供的强大的组件与指令等功能制作出一个简单的图片轮播控件,继续上文打的比方的话这就像是一个"器官",功能是呈现图片,并感知用户的点击或手势来切换图片. 一.创建组件结束上文

Angularjs 创建可复用组件实例代码

相关推荐

随机推荐