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
  • 相关阅读:
    【推广】+发送短信
    【Linux】+文件操作
    【CRT】+文件上传与下载
    【Java】+查看调用关系
    【博客园】+设置
    【Java】+http
    【Postman】
    【Java】+模拟浏览器操作
    【Java】+快速打印数组
    【Java】+字符串
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5062365.html
Copyright © 2011-2022 走看看