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

How to get json data and construct a modal using Angular JS

本文关键字：模态 一个 Angular 何使用 JS 获取 数据 json      更新时间：2023-09-26

当我点击视图细节按钮时，我想请求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;
    });
}

当用户点击detail按钮时，使用angular.js运行这个MyCtrl函数的最佳实践是什么?此外，上面的HTML正在使用另一个控制器打印出来。我希望有一些方法来绑定点击与硬编码ID的链接等。

你可以在你的控制器中这样调用方法:

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

然后在控制器中:

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

使用异步数据编辑CRUD的完整示例(这里通过$timeout模拟)可以在这里看到:http://plnkr.co/edit/EAabx4?p=preview

它使用http://angular-ui.github.com/bootstrap/存储库中的$dialog服务。这个例子使用了Bootstrap的CSS，但是模板是完全可定制的。

$dialog服务的优点是它可以本地与AngularJS的承诺一起工作，所以你不必将东西复制到作用域，使用手表等。

把你的服务器通信代码(即$http之类的东西)放到Angular服务中。将该服务注入到显示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;
   });
}

相关文章：