admin管理员组

文章数量:1317898

I couldn't get this ngDialog module working with AngularJs so looking for some hint where I went wrong.

My Json file named abc.json

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

Angular Controller

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

And finally the 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/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="//cdnjs.cloudflare/ajax/libs/ng-dialog/0.2.3/js/ngDialog.min.js"></script>
</body>

Here is the JsFiddle, but I couldn't make it work with JsFiddle either, some different error.

In my local machine I don't get any error when the DOM loads and the value are displayed correctly from the JSON file. However when I click the link, I get this error:

TypeError: Cannot call method 'open' of undefined

So I am guessing the ngDialog is not loaded or something else.

I couldn't get this ngDialog module working with AngularJs so looking for some hint where I went wrong.

My Json file named abc.json

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

Angular Controller

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

And finally the 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./ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="//cdnjs.cloudflare./ajax/libs/ng-dialog/0.2.3/js/ngDialog.min.js"></script>
</body>

Here is the JsFiddle, but I couldn't make it work with JsFiddle either, some different error.

In my local machine I don't get any error when the DOM loads and the value are displayed correctly from the JSON file. However when I click the link, I get this error:

TypeError: Cannot call method 'open' of undefined

So I am guessing the ngDialog is not loaded or something else.

  • javascript
  • angularjs
  • ng-dialog
Share Improve this question edited Aug 22, 2014 at 13:35 asked Aug 22, 2014 at 9:05 user1376704user1376704 4
  • I think your $scope has the wrong scope in application. I change your jsfiddle . Before you hit your link, click on run fiddle. May be this will work for you. – Patrick Commented Aug 22, 2014 at 9:18
  • but in your fiddle angular $scope is out of controller – user1376704 Commented Aug 22, 2014 at 9:30
  • yeah. May I did not get your problem at all, but you need to define your $scope.openPlain out of the controller. This will fix your TypeError: Cannot call method 'open' of undefined – Patrick Commented Aug 22, 2014 at 9:35
  • you cannot use Angular $scope outside of angular controller. See the example in ngDialog here... github./likeastore/ngDialog it uses angular scope to run its methods – user1376704 Commented Aug 22, 2014 at 9:57
Add a ment  | 

2 Answers 2

Reset to default 2

You didn't inject ngDialog into your controller properly:

This line:

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

This should be:

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

Here is your fiddle working. You didn't specify the template to use to layout the dialog. Anyway this will get you a bit further along.

http://jsfiddle/ys01yoLk/5/

You had a problem of injection and you have to call the CSS files in your HTML. Controller

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

HTML:

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

Then it works !

本文标签： javascriptHow to get popup with ngDialogStack Overflow

版权声明：本文标题：javascript - How to get pop-up with ngDialog? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742035343a2417243.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。