2

当我单击查看详细信息按钮时，我想请求 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 等。

4

3 回答 3

4

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

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

然后在控制器中：

$scope.getDetails = function() {
    $http.get(...).success(function(data){
        $scope.story = data;
    });
}
于 2013-03-27T02:53:23.317 回答
1

将您的服务器通信代码（即 $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;
   });
}
于 2013-03-27T02:54:55.417 回答
1

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

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

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

于 2013-03-27T06:51:15.613 回答