Question

我有一个使用动态路由加载模态窗口的应用程序，每个窗口显示一个＆＃34;活动＆＃34;来自JSON文件的对象。目前，我使用该路由确定哪个卡可见，然后调用数据服务以根据与路由名称的匹配来填充数据。

但我不喜欢这个解决方案，因为它将我当前的卡与阵列的上下文隔离开来。我宁愿能够从模板中传递卡片对象，因为那时我会知道$ index是什么，然后我可以用它来导航到＆＃34; prev＆＃34;和＆＃34; next＆＃34;元件。

如果我有这个标记：

 <div ng-controller="MenuCtrl">
  <ul class="menu">
  <li ng-repeat="card in cards">
    <a href="#/page/{{ card.shortName }}">{{ card.shortName }} </a>
  </li>
 </ul>
 </div>

触发此$ routeProvider：

$routeProvider
    .when('/page/:name', {
        templateUrl : 'modalContainer',
        controller : 'ModalContainerCtrl'
    })

这会打开这个控制器：

.controller('ModalContainerCtrl',['$scope', '$modal', '$route', function($scope, $modal, $route) {

var modalInstance = $modal.open({
    templateUrl : '../assets/templates/modal.html',
    controller: 'ModalCtrl'
});

$scope.activity = $route.current.pathParams.name;
console.log($scope.activity);

//Modal controls
$scope.close = function () {
    console.log("close!");
    $modalInstance.close();
};

}])

有什么方法可以通过此路由或任何其他方式将card对象传递给ModalContainerCtrl？

Answer 1

您可以使用resolve（将解析成员的定义解析并将其作为本地传递给控制器来传递范围对象到模态窗口控制器;它等效于AngularJS路由的resolve属性）。所以在你的情况下可以这样做：

.controller('ModalContainerCtrl',['$scope', '$modal', '$route', function($scope, $modal, $route) {
//your card object
$scope.card = '';

var modalInstance = $modal.open({
    templateUrl : '../assets/templates/modal.html',
    controller: 'ModalCtrl',
    resolve: {
        card: function () {
              return $scope.card;
              }
    }
});

$scope.activity = $route.current.pathParams.name;
console.log($scope.activity);

//Modal controls
$scope.close = function () {
    console.log("close!");
    $modalInstance.close();
};

}])

并在模态控制器中：

var ModalCtrl = function ($scope, $modalInstance,card) {
    //Modal controls
    //card now can be used over here
    $scope.close = function () {
      console.log("close!") //This will now run
      modalInstance.close();
    };
}

单击链接时，将AngularJS $ scope变量传递给新控制器

1 个答案: