app.filter('startFrom', function() {返回函数(输入，开始){如果(输入){开始 = + 开始；//解析为int返回 input.slice(start);}返回 [];}});app.filter('dateToISO', function() {返回函数(输入){input = new Date(input).toISOString();返回输入；};});app.controller('postsCtrl', function ($scope, $log, $http, $timeout, Data) {Data.get('posts').then(function(data){$scope.posts = data.data;$scope.currentPage = 1;//当前页面$scope.filteredItems = $scope.posts.length;//最初为无过滤器$scope.totalItems = $scope.posts.length;$scope.list_pages = [{编号:'5'，名称:'5'}, {编号:'10'，名称:'10'}, {编号:'20'，名称:'20'}, {编号:'50'，名称:'50'}, {id: '100',名称:'100'}];$scope.maxSize = 5;});$scope.setPage = function(pageNo) {$scope.currentPage = pageNo;};$scope.filter = function() {$超时(功能(){$scope.filteredItems = $scope.filtered.length;}, 10);};$scope.sort_by = 函数(谓词){$scope.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("你确定要删除帖子吗")){Data.delete("posts/"+post.id).then(function(result){$scope.posts = _.without($scope.posts, _.findWhere($scope.posts, {id:post.id}));});}};$scope.open = 函数(p，大小){var modalInstance = $modal.open({templateUrl: 'views/postsEdit.html',控制器:'postsEditCtrl',尺寸:尺寸，解决: {项目:函数(){返回 p;}}});modalInstance.result.then(function(selectedObject) {if(selectedObject.save ==插入"){$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 = 函数 () {$modalInstance.dismiss('关闭');};$scope.title = (item.id > 0) ?'编辑帖子' : '添加帖子';$scope.buttonText = (item.id > 0) ?'更新帖子' : '添加新帖子';var 原始 = 项目；$scope.isClean = 函数(){返回 angular.equals(original, $scope.post);}$scope.saveProduct = 函数(后){post.uid = $scope.uid;如果(post.id > 0){Data.put('posts/'+post.id, post).then(function (result) {如果(结果.状态！= '错误'){var x = angular.copy(post);x.save = '更新';$modalInstance.close(x);}别的{控制台日志(结果)；}});}别的{post.status = '活动';Data.post('posts', post).then(function (result) {如果(结果.状态！= '错误'){var x = angular.copy(post);x.save = '插入';x.id = 结果.数据；$modalInstance.close(x);}别的{控制台日志(结果)；}});}};});

<div class="row" align="center"><div class="stats"><i class="fa fa-thumb-tack"></i>帖子总数 (<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">垃圾桶</a>(<span class="attendStat">X</span>)</div>
<div class="row"><div class="col-md-1">页面大小:<select ng-model="entryLimit" class="form-control" ng-options="obj.id as obj.name for obj in list_pages" ng-init="entryLimit='10'"></选择>

<br/><div class="row"><div class="table-responsive" ng-show="filteredItems > 0"><table class="table table-striped table-bordered"><头><th>发布日期<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>平台<a ng-click="sort_by('platform');"><i class="glyphicon glyphicon-sort"></i></a><;/th><th>链接标题<a ng-click="sort_by('title');"><i class="glyphicon glyphicon-sort"></i></a></th><th>重定向网址(基础)<a ng-click="sort_by('redirect');"><i class="glyphicon glyphicon-sort"></i><;/a></th><th>Announce<a ng-click="sort_by('announce');"><i class="glyphicon glyphicon-sort"></i></a><;/th><th>Approve<a ng-click="sort_by('approve');"><i class="glyphicon glyphicon-sort"></i></a><;/th><th></th></thead><tbody ng-repeat="过滤中的数据 = (posts | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit"><tr><td class="posts-publishdate">{{data.publishdate |dateToISO |日期:'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' ?"活动" : "非活动"}}</button></td><td><button class="btn btn-sm" ng-class="{1:'btn-success', 0:''}[data.approved]" ng-click="changePostStatus(data);">{{data.approved == '1' ?"活动" : "非活动"}}</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>

</td></tr><tr><td></td><td colspan="8"><table class="table table-striped table-bordered"><头><th>图片网址<a ng-click="sort_by('img');"><i class="glyphicon glyphicon-sort"></i></a></th><th>链接描述<a ng-click="sort_by('description');"><i class="glyphicon glyphicon-sort"></i></a></th><th>Tweet<a ng-click="sort_by('dynamic_content');"><i class="glyphicon glyphicon-sort"></i></a><;/th></thead><tr><td><img src="{{data.img}}" width="200"></td><td>{{data.description}}</td><td>{{data.dynamic_content}}</td></tr></tbody></td></tr></tbody>

<div class="col-md-12" ng-show="filteredItems == 0"><div class="col-md-12"><h4>未找到客户</h4>

任何帮助将不胜感激.

您错过了在 postsCtrl 控制器中注入 $modal 依赖项

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

<块引用>

确保在获取之前已经注入了 particular 依赖项访问它.假设你已经添加了 ui.bootstrap 模块也有依赖.

<小时>

更新

如果您使用的是 0.14.X 的最新版本的 angular ui bootstrap，则需要注入 $uibModal 而不是 $modal.当他们重命名所有 boostrap 指令和服务名称时，前缀为 uib.

$modalInstance 依赖也会发生同样的事情，需要更改为 $uibModalInstance

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.

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

这篇关于角度错误 - ReferenceError: $modal 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！