• 首页
  • 问答

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

    2023-07-08 10:41 21次浏览 问答

    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”>
    Min value: <input type=”text” size=”3″ ng-model=”minRating”>
    Max value: <input type=”text” size=”3″ng-model=”maxRating”>
    Form has been modified : {{ form。
    $dirty }}
    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 已经有了一个简单的雏形了。
    可以有如下两种试用方法：<div rn-stepper> </div>
    <rn-stepper> </rn-stepper>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中，看下面这行代码：<– lang: js –>
    <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/感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！。

    1.文章《Angularjs 创建可复用组件实例代码》援引自互联网，为网友投稿收集整理，仅供学习和研究使用，内容仅代表作者本人观点，与本网站无关，侵删请点击页脚联系方式。

    2.文章《Angularjs 创建可复用组件实例代码》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

    相关推荐

    ↑