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

程序员文章站 2023-08-18 22:39:06

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

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 NgModule 模块详解

下一篇：基于angularJS的表单验证指令介绍

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

Angularjs2不同组件间的通信实例代码