AngularJS、ui-路由器和 bootstrap 模态

Question

当select输入一个选项

时，显示模态 window 有一些问题

HTML

<!DOCTYPE html>
<html ng-app="myApp">
<body>
    <div ui-view></div>
</body>

</html>

应用控制器

angular.module('myApp', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
            $urlRouterProvider.otherwise('/');
            $stateProvider
            .state('home',{
                url: '/',
                templateUrl: 'contacts.html',
                controller: 'myCtrl'
        })
    }])

家庭控制器

angular.module('myApp', [])
.controller('myCtrl', function($http, $scope) {
  $http.get('test.json').success(function (data) {
     $scope.selected = data;
  });
});

contacts.html

<select ng-model="selectedRegion" data-ng-options="location for location in selected.regions">
    <option value="">Region</option>
</select>
<select ng-model="selectedCountry" data-ng-options="place for place in selected.countries[selectedRegion]">
    <option value="">Country</option>
</select>
        {{selectedRegion}}

如何制作模式 window，我可以在其中显示，例如在 selecting 相关区域或国家之后显示 {{selectedRegion}}？请帮助，我尝试注入 ['ui.bootstrap']，并且 ng-click on button 工作正常。但是如何用 select 做到这一点呢？谢谢

这里是Plunk

Answer 1

根据您提供的信息，还有一些工作要做。

在home.js

angular.module('myApp')

angular.module('myApp', [])

在国家列表中添加 ng-change。
更改时，我们将打开一个模式

Plunker

已添加 ui.bootstrap 作为模块依赖项，用于模态

AngularJS、ui-路由器和 bootstrap 模态

AngularJS, ui-router and bootstrap modal

angularjs

angular-ui-bootstrap

angular-ui-router