沃梦达 / 编程问答 / 数据库问题 / 正文

角度错误 - ReferenceError: $modal 未定义

数据库问题
2021-01-01

Angular Error - ReferenceError: $modal is not defined(角度错误 - ReferenceError: $modal 未定义)

本文介绍了角度错误 - ReferenceError: $modal 未定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用教程中的代码并对其进行了一些修改.我遇到了编辑功能的问题.我不断收到ReferenceError: $modal is not defined"这是我的代码.

postCtrl:

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);}别的{控制台日志(结果)；}});}};});

html:

<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'"></选择>
<div class="col-md-5"><span class="">已过滤:{{filtered.length }} of {{ totalItems }} 总帖子</span><input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control"/>
<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-分页>
<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 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

本文标题为：角度错误 - ReferenceError: $modal 未定义

上一篇： 如何使用 MEAN 堆栈(MySQL、Express、Angular、Node)将数
下一篇： 由于 Angular Universal 服务器渲染中的 Zone.js 停止工

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2