Angular Error - ReferenceError: $modal is not defined

允我心安 提交于 2021-02-08 14:57:14

问题


I am using code form a tutorial and modifying it a bit. I have run into an issue with the edit feature. I keep getting a "ReferenceError: $modal is not defined" here is my code.

postCtrl:

app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});
app.filter('dateToISO', function() {
  return function(input) {
    input = new Date(input).toISOString();
    return input;
  };
});
app.controller('postsCtrl', function ($scope, $log, $http, $timeout, Data) {
    Data.get('posts').then(function(data){
        $scope.posts = data.data;
        $scope.currentPage = 1; //current page
        $scope.filteredItems = $scope.posts.length; //Initially for no filter  
        $scope.totalItems = $scope.posts.length;
        $scope.list_pages = [
                {
                    id: '5',
                    name: '5'
                }, {
                    id: '10',
                    name: '10'
                }, {
                    id: '20',
                    name: '20'
                }, {
                    id: '50',
                    name: '50'
                }, {
                    id: '100',
                    name: '100'
                }
            ];
        $scope.maxSize = 5;
    });
    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function() {
        $timeout(function() { 
            $scope.filteredItems = $scope.filtered.length;
        }, 10);
    };
    $scope.sort_by = function(predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };
    $scope.changePostStatus = function(post){
        post.approved = (post.approved=="1" ? "0" : "1");
        Data.put("posts/"+post.id,{approved:post.approved});
    };
    $scope.changePostAnnounce = function(post){
        post.announce = (post.announce=="1" ? "0" : "1");
        Data.put("posts/"+post.id,{announce:post.announce});
    };

    $scope.trashPost = function(post){
        //$log.log(post);
        if(confirm("Are you sure to remove the post")){
            Data.delete("posts/"+post.id).then(function(result){
                $scope.posts = _.without($scope.posts, _.findWhere($scope.posts, {id:post.id}));
            });
        }
    };
    $scope.open = function (p,size) {
        var modalInstance = $modal.open({
          templateUrl: 'views/postsEdit.html',
          controller: 'postsEditCtrl',
          size: size,
          resolve: {
            item: function () {
              return p;
            }
          }
        });
        modalInstance.result.then(function(selectedObject) {
            if(selectedObject.save == "insert"){
                $scope.posts.push(selectedObject);
                $scope.posts = $filter('orderBy')($scope.posts, 'id', 'reverse');
            }else if(selectedObject.save == "update"){
                p.description = selectedObject.description;
                p.price = selectedObject.price;
                p.stock = selectedObject.stock;
                p.packing = selectedObject.packing;
            }
        });
    };

});

app.controller('postsEditCtrl', function ($scope, $modalInstance, item, Data) {

  $scope.post = angular.copy(item);

        $scope.cancel = function () {
            $modalInstance.dismiss('Close');
        };
        $scope.title = (item.id > 0) ? 'Edit Post' : 'Add Post';
        $scope.buttonText = (item.id > 0) ? 'Update Post' : 'Add New Post';

        var original = item;
        $scope.isClean = function() {
            return angular.equals(original, $scope.post);
        }
        $scope.saveProduct = function (post) {
            post.uid = $scope.uid;
            if(post.id > 0){
                Data.put('posts/'+post.id, post).then(function (result) {
                    if(result.status != 'error'){
                        var x = angular.copy(post);
                        x.save = 'update';
                        $modalInstance.close(x);
                    }else{
                        console.log(result);
                    }
                });
            }else{
                post.status = 'Active';
                Data.post('posts', post).then(function (result) {
                    if(result.status != 'error'){
                        var x = angular.copy(post);
                        x.save = 'insert';
                        x.id = result.data;
                        $modalInstance.close(x);
                    }else{
                        console.log(result);
                    }
                });
            }
        };
});

html:

<div class="container">
    <div class="row" align="center">
        <div class="stats"><i class="fa fa-thumb-tack"></i> Total Posts (<span class="attendStat">{{ totalItems }}</span>)<span class="seperator">&nbsp;&nbsp;|&nbsp;&nbsp;</span><i class="fa fa-trash-o"></i> <a href="#" id="trashCan" class="trashCan">Trash</a> (<span class="attendStat">X</span>)</div>
    </div>
    <div class="row">
        <div class="col-md-1">PageSize:
            <select ng-model="entryLimit" class="form-control" ng-options="obj.id as obj.name for obj in list_pages" ng-init="entryLimit='10'">
            </select>
        </div>
        <div class="col-md-5"><span class="">Filtered: {{ filtered.length }} of {{ totalItems }} total posts</span>
            <input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
        </div>
        <div class="col-md-4 pull-right text-right" ng-show="filteredItems > 0">
            <uib-pagination total-items="filteredItems" items-per-page="entryLimit" boundary-link-numbers="true" max-size="maxSize" ng-model="currentPage" class="pagination-sm"></uib-pagination>        
        </div>
    </div>
    <br/>
    <div class="row">
        <div class="table-responsive" ng-show="filteredItems > 0">
            <table class="table table-striped table-bordered">
            <thead>
            <th>Publish Date&nbsp;<a ng-click="sort_by('publishdate');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>GUID&nbsp;<a ng-click="sort_by('guid');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Platform&nbsp;<a ng-click="sort_by('platform');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Link Title&nbsp;<a ng-click="sort_by('title');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Redirect Url (Base)&nbsp;<a ng-click="sort_by('redirect');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Announce&nbsp;<a ng-click="sort_by('announce');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Approve&nbsp;<a ng-click="sort_by('approve');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th></th>
            </thead>
            <tbody ng-repeat="data in filtered = (posts | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                <tr>
                    <td class="posts-publishdate">{{data.publishdate | dateToISO | date:'MMM d, y h:mm a' }}</td>
                    <td>{{data.guid}}</td>
                    <td>{{data.platform}}</td>
                    <td>{{data.title}}</td>
                    <td>{{data.redirect}}</td>
                    <td>
                        <button class="btn btn-sm" ng-class="{1:'btn-success', 0:''}[data.announce]" ng-click="changePostAnnounce(data);">{{data.announce == '1' ? "Active" : "Inactive"}}</button>
                    </td>
                    <td>
                        <button class="btn btn-sm" ng-class="{1:'btn-success', 0:''}[data.approved]" ng-click="changePostStatus(data);">{{data.approved == '1' ? "Active" : "Inactive"}}</button>
                    </td>
                    <td style="width:100px">
                        <div class="btn-group">
                          <button type="button" class="btn btn-default fa fa-edit" ng-click="open(data);"></button>
                          <button type="button" class="btn btn-danger fa fa-trash-o" ng-click="trashPost(data);"></button>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="8">
                        <table class="table table-striped table-bordered">
                            <thead>
                                <th>Image Url&nbsp;<a ng-click="sort_by('img');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Link Description&nbsp;<a ng-click="sort_by('description');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>Tweet&nbsp;<a ng-click="sort_by('dynamic_content');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><img src="{{data.img}}" width="200"></td>
                                    <td>{{data.description}}</td>
                                    <td>{{data.dynamic_content}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>

                </tr>
            </tbody>
            </table>
        </div>
        <div class="col-md-12" ng-show="filteredItems == 0">
            <div class="col-md-12">
                <h4>No customers found</h4>
            </div>
        </div>
    </div>
</div>

Any help would be much appreciated.


回答1:


You missed to inject $modal dependency inside postsCtrl controller

app.controller('postsCtrl', function ($scope, $log, $http, $timeout, Data, $modal) {

Make sure you have injected particular dependency before getting access to it. Assuming you have already added ui.bootstrap module dependency too.


UPDATE

If you are using latest version of angular ui bootstrap which is 0.14.X would need to inject $uibModal instead of $modal. As they rename all boostrap directive and serviec name prepends with uib prefix.

Same thing will happen with $modalInstance dependency, which need to change to $uibModalInstance



来源:https://stackoverflow.com/questions/36071978/angular-error-referenceerror-modal-is-not-defined

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!