Arhn - архитектура программирования

Неизвестный провайдер: $modalInstanceProvider ‹- $modalInstance ‹- MainController

У меня есть приложение с модальными окнами, которое я пытаюсь вызвать с помощью $modalInstance. Согласно другим вопросам, которые я прочитал здесь, я не должен включать ng-controller в свой шаблон, и это именно то, что я сделал, однако это все еще не работает.

Вот мой код:

HTML – главная страница

<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

HTML — шаблон add.html

<div ng-show="showAddModal">

    <div class="product-header">
        <div class="modal-title">Add Product Information</div>
        <div class="modal-close" ng-click="closeModal();">X</div>
    </div>

    <!-- other codes go here -->
</div>

AngularJS — app.js

var app = angular.module('ProductApp', ['ngResource', 'ui.bootstrap']);

AngularJS — контроллер

app.controller('MainController', ['$scope', '$resource', '$http', 'ProductFactory', 'EditProductFactory', '$modalInstance',
                              function ($scope, $resource, $http, ProductFactory, EditProductFactory, $modalInstance) {

$scope.addProduct = function () {

    $scope.showAddModal = true;

    var modalOptions = {
        template: '/views/add.html',
        controller: 'AddController'
        //scope: $scope
    };

    $modal.open(modalOptions); 
}

...

Мы будем очень благодарны за любые советы.

Спасибо.

javascript angularjs angular-ui
03.01.2017

  • Вы пытались внедрить $modal в свой контроллер? 03.01.2017

Ответы:


1

Вам нужно ввести $uibModal вместо $modalInstance в ваш вызывающий контроллер. И используйте $uibModal.open(...).

В свой AddController можно ввести $uibModalInstance

angular.module('ProductApp').controller('AddController', function ($scope, $uibModalInstance) {
  $scope.close = function () {
    $uibModalInstance.close();
  };
});
03.01.2017
  • Спасибо. Я сделал то, что вы сказали, но теперь я получаю ошибку $uibModal is not defined. Насколько я понимаю, $uibModalInstance позаботится об этом, так что мне не нужно также звонить $uibModal... верно? 03.01.2017
  • Я создал Plunkr, близкий к вашему примеру. Надеюсь, поможет. 03.01.2017
  • Это определенно так. Спасибо за ваши усилия! :) 03.01.2017
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..