微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

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

直接上代码

html:

rush:xhtml;"> Model value : rating">
Min value: rating">
Max value: rating">
Form has been modified : {{ form.$dirty }}
Form is valid : {{ form.$valid }}

js:

rush:js;"> angular.module(‘demo‘,[ ‘revolunet.stepper‘ ])

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

rn-stepper最简结构

rush: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: ‘‘ + ‘
0
‘ + ‘‘ }; });

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

可以有如下两种试用方法

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

添加内部动作

直接上代码

rush: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: ‘

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

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

与外部世界(外部作用域)的交互

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

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

直接上代码

rush:js;"> scope: { value: ‘=ngModel‘ }

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

什么叫双向绑定?

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

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

rating">

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

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

让我们组件更加友好

直接上代码

rush: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,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.<a href="https://www.jb51.cc/tag/render/" target="_blank" class="keywords">$render</a> = 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.<a href="https://www.jb51.cc/tag/render/" target="_blank" class="keywords">$render</a>();
  }

  // update the value when user clicks the buttons
  s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.decrement = function() {
    updateModel(-1);
  };
  s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.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/

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐