PhoneBook Tutorial / Can't Open Modal #1220

bobtabor created 8 years ago

Hi, was attempting to follow the tutorial to pop open the Create Person dialog.

It's at this step I get stuck:

<a class="postlink" href="http://www.aspnetzero.com/Documents/Developing-Step-By-Step#creating-a-new-people">http://www.aspnetzero.com/Documents/Dev ... new-people</a>

In Chrome Tools, I can see the error. (See attached screenshot).

Looked up the error on the forums, and saw this thread: #862@a3828112-88a9-4f3e-8d4e-08789ee5b88b

... and I replaced the $modal with $uibModal, however it didn't fix the issue.

Delete, filter, permissions ... everything works. Just can't pop up the dialog. Help? Thank you!

Here's the index.js

(function () {
    appModule.controller('tenant.views.phonebook.index', [
        '$scope', '$uibModal', 'abp.services.app.person',
        function ($scope, $uibModal, personService) {
            var vm = this;

            $scope.$on('$viewContentLoaded', function () {
                App.initAjax();
            });

            vm.loading = false;

            vm.persons = [];
            vm.filterText = '';

            vm.permissions = {
                createPerson: abp.auth.hasPermission('Pages.Tenant.PhoneBook.CreatePerson'),
                deletePerson: abp.auth.hasPermission('Pages.Tenant.PhoneBook.DeletePerson')
            };

            vm.getPeople = function () {
                personService.getPeople({
                    filter: vm.filterText
                }).success(function (result) {
                    vm.persons = result.items;
                });
            };

            vm.openModal = function () {
                var modalInstance = $uibModal.open({
                    templateUrl: '~/App/tenant/views/phonebook/createPersonModal.cshtml',
                    controller: 'tenant.views.phonebook.createPersonModal as vm',
                    backdrop: 'static'
                });

                modalInstance.result.then(function () {
                    vm.getPeople();
                });
            };


            vm.deletePerson = function (person) {
                abp.message.confirm(
                    app.localize('AreYouSureToDeletePerson', person.name),
                    function (isConfirmed) {
                        if (isConfirmed) {
                            personService.deletePerson({
                                id: person.id
                            }).success(function () {
                                abp.notify.success(app.localize('SuccessfullyDeleted'));
                                vm.getPeople();
                            });
                        }
                    }
                );
            };

            vm.getPeople();
        }
    ]);
})();

... and the index.cshtml:

<div ng-controller="tenant.views.phonebook.index as vm">
    <div class="row margin-bottom-5">
        <div class="col-xs-6">
            <div class="page-head">
                <div class="page-title">
                    <h1>
                        <span>@L("PhoneBook")</span>
                    </h1>
                </div>
            </div>
        </div>
        <div class="col-xs-6 text-right">
            <button ng-if="vm.permissions.createPerson" class="btn btn-primary blue" ng-click="vm.openModal()"><i class="fa fa-plus"></i> @L("CreateNewPerson")</button>
        </div>
    </div>
    <div class="portlet light">
        <div class="portlet-title">

            <h3>@L("AllPeople") ({{vm.persons.length}})</h3>

            <div class="inputs inputs-full-width">
                <div class="portlet-input">
                    <form>
                        <div class="input-group">
                            <input ng-model="vm.filterText" auto-focus class="form-control" placeholder="@L("SearchWithThreeDot")" type="text">
                            <span class="input-group-btn">
                                <button ng-click="vm.getPeople()" class="btn btn-default" type="submit"><i class="icon-magnifier"></i></button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>

        </div>
        <div class="portlet-body">

            <div id="AllPeopleList" class="list-group">
                <div class="list-group-item" ng-repeat="person in vm.persons" ng-class="{'person-editing':person==vm.editingPerson}">
                    <h4 class="list-group-item-heading">
                        {{person.name}} {{person.surname}}
                        <span class="person-buttons">
                            <button ng-click="vm.editPerson(person)" title="@L("Edit")" class="btn btn-circle btn-icon-only green">
                                <i class="icon-pencil"></i>
                            </button>
                            <button ng-if="vm.permissions.deletePerson" ng-click="vm.deletePerson(person)" title="@L("Delete")" class="btn btn-circle btn-icon-only red">
                                <i class="icon-trash"></i>
                            </button>
                        </span>
                    </h4>
                    <p class="list-group-item-text">
                        {{person.emailAddress}}
                    </p>
                    
                </div>
            </div>

        </div>
    </div>
</div>

7 Answer(s)