国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

angular.js - How to convert ng1 directive to ng2?
阿神
阿神 2017-05-15 17:13:47
0
3
891

Recently the project team needs to transfer the project from ng1 to ng2. I read the relevant ng2 documentation on instructions, but I’m totally confused. I know that $element corresponds to ng2 ElementRef, but I’m still at a loss for details. Please give me some advice!

Ng1 Directive

.directive("Touchmove", function () {
    return {
        controller: ["$scope", "$element", function ($scope, $element) {

            $element.bind("touchstart", onTouchStart);
            function onTouchStart(event) {
                event.preventDefault();
                $element.bind("touchmove", onTouchMove);
                $element.bind("touchend", onTouchEnd);
            }
            function onTouchMove(event) {
                var method = $element.attr("ng-touchmove");
                $scope.$event = event;
                $scope.$apply(method);
            }
            function onTouchEnd(event) {
                event.preventDefault();
                $element.unbind("touchmove", onTouchMove);
                $element.unbind("touchend", onTouchEnd);
            }

        }]
    }
});

.directive("Touchend", function () {
    return {
        controller: ["$scope", "$element", function ($scope, $element) {

            $element.bind("touchend", onTouchEnd);
            function onTouchEnd(event) {
                var method = $element.attr("ng-touchend");
                $scope.$event = event;
                $scope.$apply(method);
            }

        }]
    }
})     

HTML

<p touchend="mRelease()" touchmove="mTouch($event)" ng-click="mTouch($event)" >
        <p ng-repeat="c in indexs" style="width:100%;height:{{hIndex}}px;">
            {{c}}
        </p>
</p>

Ng2 ??

阿神
阿神

閉關(guān)修行中......

reply all(3)
洪濤

Thanks for the invitation!
Instructions in Angular 2 are divided into the following three types:

  • Component (Component directive): used to build UI components, inherited from the Directive class. Defined through @Component() decorator

  • Attribute directive: used to change the appearance or behavior of a component. Defined via @Directive() decorator

  • Structural directive: used to dynamically add or delete DOM elements to change the DOM layout. Such as ngIf, ngFor. The characteristic is the instructions starting with . is syntactic sugar, which means using HTML 5 template syntax <template>

In addition, you can take a look at the two chapters in Angular 2 The Road to Immortality - Table of Contents
:

  • Angular 2 vs Angular 1 (The following two articles introduce the differences between Ng1 and Ng2 instructions. The Chinese version has not been sorted out yet, sorry)

    • Component Property Binding with @Input() in Angular 2

    • Component Event Binding with @Output() in Angular 2

  • Angular 2 component learning route (for reference only)

    • This is a relatively complete component learning route. You can first get a general understanding based on the article description. The main contents are input properties, output properties, host property binding and event binding.

我想大聲告訴你

I also changed from ng1 to ng2. The approaches of the two frameworks are completely different. Even the ElementRef you mentioned does not get the DOM but uses render instead. So if the project is not very small, consider refactoring it

大家講道理

Give up and upgrade item from 1 to 2!

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template