最近專案組需要將項目轉到從ng1 轉到 ng2。看了相關ng2關於指令的文檔,但這是一頭霧水,知道將$element 對應ng2 ElementRef,在細節還是不知所措,求指教!
.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);
}
}]
}
})
<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>
謝邀!
Angular 2 中指令分為以下三種:
元件(Component directive):用於建立UI元件,繼承於 Directive 類別。透過@Component() 裝飾器定義
屬性指令(Attribute directive): 用來改變元件的外觀或行為。透過 @Directive()裝飾器定義
結構指令(Structural directive): 用於動態新增或移除DOM元素來改變DOM佈局。如ngIf、ngFor。特點是號開頭的指令,是語法糖,表示使用HTML 5模板語法
另外可以先看一下 Angular 2 修仙之路 - 目錄
中兩個章節:
Angular 2 vs Angular 1 (以下兩篇就是介紹Ng1與Ng2指令區別,中文版還沒整理出來,不好意思)
Component Property Binding with @Input() in Angular 2
Component Event Binding with @Output() in Angular 2
Angular 2 組件學習線 (僅供參考)
這個是比較全的組件學習線路,可以先根據文章說明,大致了解一下。主要的內容是輸入屬性、輸出屬性、宿主屬性綁定和事件綁定。
我也是從ng1換到ng2的,兩個框架的路子完全不同了,就算是你說的ElementRef也並非去獲取DOM而是使用render渲染,所以項目不是非常小的話,考慮重構吧
放棄,將項目從1升級至2!