zoukankan      html  css  js  c++  java
  • [AngularJS] Exploring the Angular 1.5 .component() method

    Angualr 1.4:

    .directive('counter', function counter() {
      return {
        scope: {},
       restrict: 'EA',
    transclude: true, bindToController: { count:
    '=' }, controller: function () { function increment() { this.count++; } function decrement() { this.count--; } this.increment = increment; this.decrement = decrement; }, controllerAs: 'counter', template: [ '<div class="todo">', '<input type="text" ng-model="counter.count">', '<button type="button" ng-click="counter.decrement();">-</button>', '<button type="button" ng-click="counter.increment();">+</button>', '</div>' ].join('') }; });

    Angualr1.5:

    .compoment('counter',  {
        bindings: {
          count: '='
        },
        controller: function () {
          function increment() {
            this.count++;
          }
          function decrement() {
            this.count--;
          }
          this.increment = increment;
          this.decrement = decrement;
        },
        controllerAs: 'vm',
        template: function($element, $attrs){
          return [
          '<div class="todo">',
            '<input type="text" ng-model="vm.count">',
            '<button type="button" ng-click="vm.decrement();">-</button>',
            '<button type="button" ng-click="vm.increment();">+</button>',
          '</div>'
        ].join('');
        },
        // restrict: 'E',
        // transclude: true
    });
    • Direcitve need pass in function, compoment need pass in object.
    • 'scope' and 'bindToController' can be replaced with just 'bindings'
    • by default restrict: 'E'
    • by default transclude: true
    • by default, if not given controllerAs, angular will create for you and name is the same as compoment name
  • 相关阅读:
    vim 编辑器使用
    PHP高并发高负载系统架构(转载)
    类的使用
    linux下EC20 4G模块驱动移植
    linux 4G模块拨号脚本
    linux4.1.4上移植ME909s-821,MU609 4G模块驱动
    shell脚本语之运算符
    vim的列编辑操作
    linux下普通用户添加 sudo 免密码
    4G模块在AM335x上的移植
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5062365.html
Copyright © 2011-2022 走看看