0

当我需要在 Angular 中打开模态窗口时，我创建了一个小演示。使用指令作为模态窗口模板。

我不确定的是我将数据/函数传递给模态的方式。

开启控制器：

    $scope.openModal = function($event){
       $scope.items = [1,2,3,4,5];
       $scope.modalInstance =  $modal.open({
           template: '<modalwindow></modalwindow>',
           scope:$scope,
           test:'akex'
    });

    $scope.modalInstance.result.then(function (selectedItem) {
        console.info(selectedItem);
    }, function () {
        console.info('Modal dismissed at: ' + new Date());
    });

和模态指令：

 angular.module('angModalApp')
 .directive('modalwindow', function () {
   return {
      templateUrl: 'scripts/directives/modalwindow.tmpl.html',
      restrict: 'E',
      link: function postLink(scope, element, attrs) {
          scope.ok = function () {
              scope.modalInstance.close(["a","b","c"]);
          };

          scope.cancel = function () {
              scope.modalInstance.dismiss('cancel');
          };
  }
};
});

我要问的是你们对这种模态的使用有何看法。有更好的方法吗？

感谢您的时间。

该项目的源代码可以在以下位置找到：https ://github.com/trostik/angular-modal-window-demo

4

2 回答 2

0

我建议你使用 Angular-UI/bootstrap：http ://angular-ui.github.io/bootstrap/

它易于实现且稳定。

于 2013-10-27T06:45:55.100 回答
0

将数据传递到此类指令的最佳方式通常是通过隔离作用域。

取自http://docs.angularjs.org/guide/directive：

<!doctype html>
<html ng-app="docsIsolateScopeDirective">
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <my-customer customer="naomi"></my-customer>
      <hr>
      <my-customer customer="igor"></my-customer>
    </div>
  </body>
</html>

请注意他们如何使用指令myCustomer上的自定义属性来传递来自控制器Ctrl范围的数据。

要访问此数据，指令定义应使用范围选项：

  .directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customer: '=customer'
    },
    templateUrl: 'my-customer.html'
  };
});

您可以看到在scope下如何指定客户。value- =customer告诉 Angular 在指定为属性的数据与定义为customer的指令隔离范围内的属性之间创建双向数据绑定。您也可以只指定=以获得更短的方式，在这种情况下，它将在指令的范围内创建与属性名称相同的引用。如果您需要传入数据，则不应在指令内更改，您应该使用 @符号而不是=，如果您需要传入函数，您应该使用&符号。

于 2013-10-27T07:00:45.937 回答