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

非同期データを使用したCRUD編集の完全な例（ここではを介してシミュレート）は、http： //plnkr.co/edit/EAabx4？p=preview$timeoutで確認できます。

http://angular-ui.github.com/bootstrap/リポジトリの$dialogサービスを使用します。この例ではBootstrapのCSSを使用していますが、テンプレートは完全にカスタマイズ可能です。

この$dialogサービスの優れた点は、AngularJSのPromiseとネイティブに連携するため、スコープにコピーしたり、時計を使用したりする必要がないことです。

于 2013-03-27T06:51:15.613 に答える