Question

当我需要在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

Answer 1

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

易于实施和稳定。

Answer 2

将数据传递到此类指令的最佳方法通常是通过隔离范围。

取自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'
  };
});

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

AngularJS模态窗口数据/对象流

2 个答案: