Question

我正试图在ui-view中实现一个模态窗口。 当模态模板和控制器位于ui-view内时，一切正常，但在单独的文件夹中将它们分开后，它们不起作用。
现在我对如何将模态模板和控制器与ui-view模板和控制器链接感到困惑。我还想将模态中的数据传递给另一个ui-view，这似乎是另一场战斗。

姓名：

ui-view （模板： drinksList.html ，控制器： DrinksListController ）
模态视图（模板： drinkModal.html ，控制器： DrinkModalController ）

我的代码结构是：

ui.route.js

angular.module('myApp')
  .config(['$stateProvider', '$urlRouterProvider', statesManager])

function statesManager($stateProvider, $urlRouterProvider) {
  .state('allLists', {
    url: '/allLists',
    views: {
      '': {
        templateUrl: '/js/components/allLists.html'
      },
      'drinksList@allLists': {
        templateUrl: '/js/components/drinksList/drinksList.html',
        controller: 'DrinksListController'
      },
      'drinkModal@allLists': {
        templateUrl: '/js/components/drinksList/drinkModal/drinkModal.html',
        controller: 'DrinkModalController'
      }
    }
  })
}

allLists.html（包含要加载的ui视图）

<div ui-view="drinksList"></div>

drinksList.html

<button type="button" ng-click="showModal()">

DrinksListController

(function() {
  angular
    .module('myApp')
    .controller('DrinksListController', DrinksListController)

  function DrinksListController($scope, $stateParams, $uibModal, DrinkModalController) {

    $scope.showModal = () => {
      $uibModal.open({
        templateUrl: '/js/components/drinksList/drinkModal/drinkModal.html',
        controller: 'DrinkModalController'
      })
    }
  }
})()

drinkModal.html

<div class="modal-body">
  <form ng-submit="addFood($event)">
    <p>Drink Name : <input ng-model="drinkName" type="text"></p>
    <button type="button" ng-click="cancel()">Close</button>
    <button type="submit">Save changes</button>
  </form>
</div>

DrinkModalController

(function() {
  angular
    .module('myApp')
    .controller('DrinkModalController', DrinkModalController)

  function DrinkModalController($scope, $modalInstance) {
    $scope.cancel = () => {
      $modalInstance.dismiss('cancel')
    }
  }
})()

我刚刚意识到我在index.html（加载脚本文件），ui.route.js，DrinksListController.js和DrinkListModal.js文件（在4个位置）中有' DrinkModalController '。不确定这个-_- 感谢您阅读所有这些内容。

ui-view内部的模态视图不起作用

0 个答案: