2

このngDialogモジュールをAngularJsで動作させることができなかったので、どこで間違ったのかヒントを探しています。

abc.json という名前のJsonファイル

[{"id":
  [
      {
          "value":"text_id",
          "desc":"Text id"
      },
      {
          "value":"group_id",
          "desc":"Group id"
      },
  ]
}]

角度コントローラー

'use strict';

angular.module('mine.controllers', [])
        .controller('myController', ['$scope', '$sce', '$http',  function($scope, $sce, $http, ngDialog) {
            $http.get('abc.json')
            .success(function(data) {
              $scope.ids = data;
            });
            $scope.openPlain = function (message) {
              ngDialog.open(message);
            };
          }]);

そして最後に HTML

<body ng-app="mine">
    <table ng-controller="myController">
        <tr ng-repeat="datas in ids">
            <td>
                <span ng-repeat="iden in datas.id">
                    <a href="" ng-click='openPlain("{{ iden.desc }}")'>{{ iden.value }}</a>, 
                </span>
            </td>
        </tr>
    </table> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.2.3/js/ngDialog.min.js"></script>
</body>

これがJsFiddleですが、別のエラーで JsFiddle でも動作させることができませんでした。

value私のローカル マシンでは、DOM がロードされ、JSON ファイルから正しく表示されてもエラーは発生しません。ただし、リンクをクリックすると、次のエラーが表示されます。

TypeError: Cannot call method 'open' of undefined

だから私はngDialogがロードされていないか、何か他のものだと推測しています。

4

2 に答える 2

2

コントローラーに ngDialog を適切に挿入しませんでした:

この行：

.controller('myController', ['$scope', '$sce', '$http',  
                              function($scope, $sce, $http, ngDialog) {

これは次のようになります。

.controller('myController', ['$scope', '$sce', '$http', 'ngDialog', 
                             function($scope, $sce, $http, ngDialog) {

これがあなたのフィドルの働きです。ダイアログのレイアウトに使用するテンプレートを指定していません。とにかく、これはあなたをもう少し先に進めます。

http://jsfiddle.net/ys01yoLk/5/

于 2014-08-22T14:17:27.880 に答える
1

インジェクションの問題があり、HTML で CSS ファイルを呼び出す必要があります。コントローラ

.controller('myController', ['$scope', '$sce', '$http', 'ngDialog', 
                             function($scope, $sce, $http, ngDialog) {

HTML:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.2.3/css/ngDialog.css" />

それはうまくいきます！

于 2014-10-23T09:50:51.807 に答える