8

我想为typeangular 添加一个新的（对话框），所以我可以像使用module.directive,module.filter一样使用它module.controller来注册指令、过滤器和控制器。

我想以dialog这种方式注册我的类型实例：

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

我还希望能够在控制器中使用已注册的对话框（依赖注入）

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();
        });
    }
});

这归结为以下问题：

  1. 如何扩展 angular 的模块以module.dialog注册我的dialog类型？

  2. 如何使我注册dialogs的可注射到controllers等？

顺便提一句，

  • 我知道angular-ui和angular-strap。
  • 我宁愿不dialog作为一个服务使用，而是作为一个单独的type（这个解决方案已经在 中实现angular-ui）。
4

1 回答 1

7

这是一个非常有趣的问题。我会在我的答案前加上一个观点：我认为你不应该扩展angular.module来提供一种dialog方法。这些方法是内置 Angular 提供程序的快捷方式，Angular 团队会不时添加一些方法。由于您可以在不添加方法的情况下访问您正在寻找的功能dialog，所以我不会。也就是说，下面的代码确实向您展示了一个非常基本的版本是如何工作的（它不会修改 Angular 模块原型，只是模块的单个实例）。

<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);
  };
});

这是一个工作示例：http: //jsfiddle.net/BinaryMuse/zj4Jq/

通过利用函数$injector.invoke内部dialogProvider.register，您可以提供使用键的能力，例如controller在configFn返回的数据中。由于directive已经有很多这样的工作方式，您可能会从查看AngularJS 源代码中获得很多。

于 2013-05-04T20:55:41.133 回答