Question

我正在使用Angular JS进行多页注册站点。（有了这个很棒的教程：http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router）

我现在想在其中一个页面（http://bootstrapformhelpers.com/country/#jquery-plugins）中使用Bootstrap Formhelper国家选择器，如下所示：

<div ui-view>
    ...
    <div class="bfh-selectbox bfh-countries" data-country="AT" data-flags="true"></div>
    ...
</div>

但它不起作用。国家选择器没有显示（高度：0）。

如果我将国家选择器放在de ui-view div之外，那么选择器就可以了。但我想把它放在ui-view div中：

<div class="bfh-selectbox bfh-countries" data-country="AT" data-flags="true"></div>
<div ui-view>
   ...
</div>

出于某种原因，angularJS指令ui-view打破了国家选择器。

有谁知道为什么会这样？

祝你好运的Yannick

编辑：

我的进口商品：

<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-animate.js"></script>
<script src="assets/js/angular-ui-router.min.js"></script>
<script src="assets/js/angular-animate.js"></script>
<script src="app.js"></script>
<!-- Bootstrap -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">
<script src="assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/bootstrap-formhelpers.min.css">
<script src="assets/js/bootstrap-formhelpers.min.js"></script>
<script src="assets/js/bootstrap-formhelpers-states.js"></script>
<script src="assets/js/bootstrap-formhelpers-countries.de-DE.js"></script>
<script src="assets/js/bootstrap-formhelpers-countries.js"></script>

EDIT2：

我现在使用指令进行初始化。奇怪的是，这段代码有效：

angular.module("formApp").directive('nationpicker', function ($parse) {
return {
    restrict: 'A',
    replace: false,
    transclude: false,
    link: function (scope, element, attrs) {
        element.append('<select id="countries1" class="form-control"></select>');
        $('#countries1').bfhcountries({flags:true})
    }
};

但是这段代码不起作用：

angular.module("formApp").directive('nationpicker', function ($parse) {
return {
    restrict: 'A',
    replace: false,
    transclude: false,
    link: function (scope, element, attrs) {
        element.append('<div id="country" class="bfh-selectbox bfh-countries" data-country="AT" data-flags="true"></div>');
        $('#country').bfhcountries({flags:true})
    }
};

实际上这些只是Bootstrap Formhelper中的不同示例（参见顶部的链接）

第一个是3.示例第二个不起作用的代码来自我的首选4.Example。

任何人都可以告诉我为什么这不适用于4.Example？

Answer 1

感谢您通过电子邮件与我联系。我查看了您的代码并进行了一些更改以解决问题。为了能够遇到类似问题的其他人，我将在此处跟进，以便我们能够解决这个问题。

问题不在于ui-view指令，而在于nationpicker指令。这是更新的指令代码：

angular.module("formApp").directive('nationpicker', function ($parse) {

    // The directive has been rewritten to work properly
    return {
        restrict: 'A', // It is an attribute
        require: '?ngModel', // It uses ng-model binding
        scope: {
          ngModel: '='
        },
        link: function (scope, elem, attrs, ctrl) {
            // Add the required classes
            elem.addClass('bfh-countries');
            elem.addClass('bfh-selectbox');

            // First we initialize the selectbox with the desired options
            elem.bfhselectbox({
                filter: (elem.attr('data-filter') == 'true') ? true : false
            }).on('change.bfhselectbox', function() {
                // Listen for the change event and update the bound model
                return scope.$apply(function () {
                    return scope.ngModel = elem.val();
                });
            });

            // Initialize the countries with the desired options
            return elem.bfhcountries({
                flags: (elem.attr('data-flags') == 'true') ? true : false,
                country: scope.ngModel || 'AT'
            });
        }
    };
});

为了实现这一点，必须对HTML

中的元素进行一些更改

<div nationpicker id="country" data-flags="true" data-filter="true" ng-model="nation"></div>

请注意，不再包含这些类。这由指令现在处理。我还选择在控制器范围内绑定国家/地区而不是使用data-country属性。这就像添加$ scope.nation ='AT'一样简单;在控制器中。

我还必须将所有与角度相关的脚本标记移动到bootstrap和form-helper脚本下面。

<!-- Bootstrap -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">
<script src="assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="assets/css/bootstrap-formhelpers.min.css">
<script src="assets/js/bootstrap-formhelpers.min.js"></script>
<script src="assets/js/bootstrap-formhelpers-states.js"></script>
<script src="assets/js/bootstrap-formhelpers-countries.de-DE.js"></script>
<!--<script src="assets/js/bootstrap-formhelpers-countries.js"></script>-->


<!-- moved all angular related scripts to here -->
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-animate.js"></script>
<script src="assets/js/angular-ui-router.min.js"></script>
<script src="assets/js/angular-animate.js"></script>
<script src="app.js"></script>
<script src="directive.js"></script>

我也会通过电子邮件与您联系，希望这有助于您继续完成项目。

为什么angularJS的ui-view打破了Bootstrap Formhelper

1 个答案: