將控制轉換爲Angular Directive？

我們對我們網站上的這個按鈕：將控制轉換爲Angular Directive？

<button class="btn btn-primary" id="button-loading-example" 
     ng-click="progress.buttonLoading.load()" 
     ng-model="progress.buttonLoading" pb-button-progress 
     type="button">Save</button>

的NG-模型鏈接到這一點，在控制器（Controller爲「進步」）：

_this.buttonLoading = { 
    isLoading: false, 
    text: 'Saving', 
    load: function() { 
    _this.buttonLoading.isLoading = true; 
    $timeout(function() { 
     _this.buttonLoading.isLoading = false; 
    }, 2000); 
    } 
};

我試圖使這個指示。我可以通過類和標籤從我的元素：

<pb-spinner-button ng-class-list="btn btn-primary">Save</pb-spinner-button>

我無法弄清楚如何連接起來（或者乾脆放棄，並取代）的NG-模型，更糟糕的，我不知道在哪裏掛鉤進入舊控制器的「加載」功能。

我意識到這很有可能舊的控制是過度的，應該是一個指令，但我從誰繼承誰是指示厭惡。

這裏是我的指令至今：

(function() { 

    'use strict'; 

    angular.module('app').directive('pbSpinnerButton', function() { 
    return { 
     restrict: 'E', 
     require: 'ngModel', 
     scope: { 
     ngModel: '=', 
     ngClassList: '@' 

     }, 
     controller: 'SpinnerController', 
     template: '<button class="{{ngClassList}}" ng-click="buttonLoading.load()" ng-model="buttonLoading" pb-button-progress type="button"><ng-transclude></button>', 
     transclude: true, 
     link: function postLink(scope, element, attrs) { 
     } 
    }; 
    }) 


    .controller('SpinnerController', function($timeout) { 

    var _this = this; 
    _this.buttonLoading = { 
     isLoading: false, 
     text: 'Saving', 
     load: function() { 
     _this.buttonLoading.isLoading = true; 
     $timeout(function() { 
      _this.buttonLoading.isLoading = false; 
     }, 2000); 
     } 
    }; 

    }); 

})();

按照要求，這裏是一個plunkr：http://plnkr.co/edit/EOekzFdUDrArZ4dkolLl?p=preview

來源

2015-10-06 Steve

沒有模型被傳遞給屬性，但因爲它是一個按鈕，你需要ng模型嗎？ ..在plunker中創建一個演示。 – charlietfl

這是我不明白的一部分。這裏是一個plunker http://plnkr.co/edit/EOekzFdUDrArZ4dkolLl?p=preview – Steve

以及拋出的錯誤是由於沒有ng模型被傳遞。對於'type = button'我看不到任何用於ng-model的任何用法...只是一個UI按鈕 – charlietfl

首先，我不認爲NG-模特走秀的按鈕任何目的。如果目的是要動態地設置按鈕的文本價值，那麼你應該使用這種方法：

<button class="btn btn-primary" id="button-loading-example" 
    ng-click="progress.buttonLoading.load()" 
    pb-button-progress type="button">{{progress.buttonLoading.text}}</button>

而且，你的指令模板似乎並沒有被正確使用NG-transclude和自定義指令和他們的屬性不應該使用'ng-'前綴。

這裏是什麼，我想你的示例實現正在尋找：

angular.module('app').directive('pbSpinnerButton', function() { 
    return { 
    restrict: 'E', 
    template: '<button class="{{classList}}" ng-click="onClick()" pb-button-progress type="button" ng-transclude></button>', 
    scope: { 
     classList: '@', 
     onClick: '&' 
    }, 
    transclude: true 
    }; 
});

然後將其包含在控制器HTML模板：

<pb-spinner-button class-list="btn btn-primary" 
    on-click="progress.buttonLoading.load()" 
>{{progress.buttonLoading.text}}</pb-spinner-button>

您可以在這裏瀏覽和運行一個簡單的實現：http://jsfiddle.net/gagkbsra

來源

2015-10-06 22:27:03 Dave

我不明白onClick如何跳轉到控制器的功能。 – Steve

當您設置on-click =「progress.buttonLoading.load（）」時，您將控制器的函數綁定到on-click屬性，然後將其作爲「onClick」存儲在指令的作用域中（駝峯範圍變量在html中轉換爲小寫和破折號）。所以當你打電話給onClick時，你實際上正在執行控制器的功能。指令範圍聲明中的「onClick：'＆'表示onClick是一個函數。 – Dave

將控制轉換爲Angular Directive？

回答

相關問題