如何使用Angular JS获取json数据并构造模式

Question

When I click on the view details button, I want to request JSON data and then construct a modal view over the content.

HTML:

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

Get JSON:

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

What is the best practices to run this MyCtrl function using angular.js when a user clicks on the detail button? Also the HTML above is being printed out using another controller. I hope there is some way to bind the clicks versus hard-coding ID's and such in the links.

Answer 1

You can call methods in your controller like this:

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

And then in the controller:

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

Answer 2

Put your server communication code (ie, $http stuff) into an Angular service . Inject that service into the controller that displays your HTML and into your controller that is associated with your modal view (if you have one).

Have your links invoke functions on the controller that will interact with the service to fetch the data. Have your modal controller $watch for the data.

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

Controllers:

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;
   });
}

Answer 3

A complete example of CRUD edit with asynchronous data (here simulated via $timeout ) can be seen here: http://plnkr.co/edit/EAabx4?p=preview

It uses the $dialog service from the http://angular-ui.github.com/bootstrap/ repository. This example uses Bootstrap's CSS but a template is fully customizable.

The nice part about the $dialog service is that it nativelly works with AngularJS promises so you don't have to copy things to a scope, use watches etc.