如何使用 Angular JS 获取 json 数据并构造模态答案

【问题标题】：How to get json data and construct a modal using Angular JS如何使用 Angular JS 获取 json 数据并构造模态
【发布时间】：2013-03-17 01:39:40
【问题描述】：

当我点击查看详细信息按钮时，我想请求 JSON 数据，然后在内容上构建一个模式视图。

HTML：

<a href="#">View Details 1</a>
<a href="#">View Details 2</a>
<a href="#">View Details 3</a>

获取 JSON：

function MyCtrl($scope){
      $http.get('json/story.json').success(function(data){
        console.log(data);
        $scope.story = data;
    });
}

当用户单击详细信息按钮时，使用 angular.js 运行此 MyCtrl 函数的最佳做法是什么？上面的 HTML 也正在使用另一个控制器打印出来。我希望有一些方法可以在链接中绑定点击与硬编码 ID 等。

【问题讨论】：

嗨布兰登，只是一个想法。你为什么不使用 $.getJSON 而不是 $.get.
嗨 ismail baig，我喜欢使用 jquery，但是我正在使用 angular 构建一个项目，因此我可以利用它的 MVC 和模板功能。
嗨，布兰登，谢谢。我其实有点困惑。无论如何，我们使用 JSRender 来实现类似的目标。

标签： javascript angularjs modal-dialog

【解决方案1】：

您可以像这样调用控制器中的方法：

<a href="#" ng-click="getDetails()">View Details</a>

然后在控制器中：

$scope.getDetails = function() {
    $http.get(...).success(function(data){
        $scope.story = data;
    });
}

【讨论】：

我喜欢这种简单的技术。谢谢。服务可能是另一种选择，但是这正是我所需要的一个简单的解决方案。

【解决方案2】：

将您的服务器通信代码（即 $http 内容）放入 Angular service。将该服务注入显示您的 HTML 的控制器和与您的模态视图关联的控制器（如果有的话）。

让您的链接调用控制器上的函数，这些函数将与服务交互以获取数据。让您的模态控制器 $watch 数据。

<div ng-controller="MyCtrl">
<a href="" ng-click="getDataset1()">View Details 1</a>

控制器：

function MyCtrl($scope, myService) {
   $scope.getDataset1 = function() {
       myService.getDataset1();  // populates myService.modalData
   };
}

function ModalCtrl($scope, myService) {
   $scope.showModal = false;
   $scope.$watch(myService.modalData, function(data) {
      $scope.modalData = data;
      $scope.showModal = true;
   });
}

【讨论】：

【解决方案3】：

可以在此处查看使用异步数据进行 CRUD 编辑的完整示例（此处通过 $timeout 模拟）：http://plnkr.co/edit/EAabx4?p=preview

它使用来自http://angular-ui.github.com/bootstrap/ 存储库的$dialog 服务。此示例使用 Bootstrap 的 CSS，但模板是完全可定制的。

$dialog 服务的优点在于它可以与 AngularJS 承诺一起工作，因此您不必将内容复制到范围、使用手表等。

【讨论】：