angularjs - rozszerzenie modułu z własnych typów/dostawców

Question

Chcę reklama nowy (dialog) type do kanciasty, więc można go używać tak jak używam module.directive, module.filter, module.controller zarejestrować dyrektyw, filtry i regulatory.

Chcę zarejestrować przypadki dialog typu w ten sposób:

module.dialog('prompt',function(dependencies){ 
    return { 
     templateUrl:'prompt.html', 
     controller:function($scope){}, 
     something:'value' 
    } 
}); 

Chcę również, aby móc korzystać z zarejestrowanych dialogi w sterownikach (wtrysk zależność)

module.controller('ListCtrl',function($scope,prompt){ 
    $scope.deleteItem = function(item){ 
     prompt('Do you want to delete this item?').then(function(result){ 
      if(result) item.$delete(); 
     }); 
    } 
}); 

To sprowadza na następujące pytania:

1. Jak rozszerzyć moduł kątowy, aby module.dialog zarejestrować moje typy dialog?

2. Jak mogę dokonać rejestracji w dialogs w iniekcji na numer controllers?

Btw,

• wiem o angular-ui i angular-strap.
• Wolałbym nie używać dialog jako usługi, ale jako oddzielne type (to rozwiązanie jest już zaimplementowane w angular-ui).

Answer 1

To dość interesujące pytanie. Przedłużę moją odpowiedź z opinią: Nie sądzę, że powinieneś rozszerzyć zakres angular.module, aby podać metodę dialog. Te metody są skrótami do wbudowanych dostawców Angular, a zespół Angular dodaje od czasu do czasu. Ponieważ możesz uzyskać dostęp do funkcji, której szukasz, , bez dodawania metody, nie zrobiłbym tego. To powiedziawszy, poniższy kod pokazuje, jak bardzo podstawowa wersja może działać (nie modyfikuje prototypu modułu kątowego, tylko pojedyncza instancja modułu).

<div ng-app="myApp"> 
    <div ng-controller='MainController'> 
    <div> 
     <button ng-click='askName()'>Ask Name</button> 
     <button ng-click='askNameAgain()'>Ask Name Again</button> 
     <button ng-click='askAge()'>Ask Age</button> 
     <button ng-click='askFood()'>Ask Food</button> 
    </div> 
    <div>{{lastResponse}}</div> 
    </div> 
</div> 

var app = angular.module('myApp', []); 

// Provide some basic injectables for testing 
app.constant('nameString', 'NAME'); 
app.constant('ageString', 'AGE'); 
app.constant('foodString', 'FAVORITE FOOD'); 

// Create the dialog provider 
app.provider('dialog', function($provide, $injector) { 
    var dialogs = {}; 

    this.register = function(name, configFn) { 
    // Create a new service 
    $provide.factory(name, function($window, $q) { 
     dialogs[name] = function() { 
     // Get data based on DI injected version of configFn 
     var data = $injector.invoke(configFn); 
     // faking async here since prompt is really synchronous 
     var deferred = $q.defer(); 
     var response = $window.prompt(data.text); 
     deferred.resolve(response); 
     return deferred.promise; 
     }; 
     return dialogs[name]; 
    }); 
    }; 

    // Injecting the service itself gives you a function that 
    // allows you to access a dialog by name, much like $filter 
    this.$get = function() { 
    return function(name) { 
     return dialogs[name]; 
    }; 
    }; 
}); 

// Providing dialog injectables via app.config 
app.config(function(dialogProvider) { 
    dialogProvider.register('askFood', function(foodString) { 
    return { text: 'What is your ' + foodString + '?' } 
    }); 
}); 

// Alternatively, shortcut to accessing the dialogProvider via app.dialog 
app.dialog = function(name, configFn) { 
    app.config(function(dialogProvider) { 
    dialogProvider.register(name, configFn); 
    }); 
}; 

app.dialog('askName', function(nameString) { 
    return { text: 'What is your ' + nameString + '?' } 
}); 

app.dialog('askAge', function(ageString) { 
    return { text: 'What is your ' + ageString + '?' } 
}); 

app.controller('MainController', 
       function($scope, askName, askAge, askFood, dialog) { 
    var setLastResponse = function(result) { 
    $scope.lastResponse = result; 
    }; 

    $scope.askName = function() { 
    askName().then(setLastResponse); 
    }; 

    $scope.askNameAgain = function() { 
    // get the dialog through the dialog service 
    // much like how $filter works 
    var theDialog = dialog('askName'); 
    theDialog().then(setLastResponse); 
    }; 

    $scope.askAge = function() { 
    askAge().then(setLastResponse); 
    }; 

    $scope.askFood = function() { 
    askFood().then(setLastResponse); 
    }; 
}); 

Oto przykład roboczych: http://jsfiddle.net/BinaryMuse/zj4Jq/

Wykorzystując $injector.invoke wewnątrz swojej funkcji dialogProvider.register można zapewnić możliwość korzystania z klucza jak controller w danych twoi configFn wraca. Ponieważ directive działa już tak bardzo, możesz sporo zyskać dzięki sprawdzaniu numeru the AngularJS source.