javascript - How to get json data and construct a modal using Angular JS - Stack Overflow

admin管理员组

文章数量:1336397

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.

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.

• javascript
• angularjs
• modal-dialog

Share Improve this question Follow edited Mar 27, 2013 at 2:48 Jess 25.2k2121 gold badges130130 silver badges155155 bronze badges asked Mar 27, 2013 at 2:30 Brandon TranBrandon Tran 3311 silver badge77 bronze badges 3

• 1 hi Brandon, just a thought. why dont you use $.getJSON instead of $.get. – ismail baig Commented Mar 27, 2013 at 2:39
• Hi ismail baig, I love using jquery however I am building a project using angular so I can take advantage of its MVC and template feature. – Brandon Tran Commented Mar 27, 2013 at 4:54
• Hi Brandon,thanks. i actually got bit confused. Anyhow we use JSRender to achieve something similar. – ismail baig Commented Mar 27, 2013 at 7:58

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

A plete 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./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.

Put your server munication code (i.e., $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;
   });
}

本文标签： javascriptHow to get json data and construct a modal using Angular JSStack Overflow