为什么 angularJS 的 ui-view 会破坏 Bootstrap Formhelper

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 破坏了国家/地区选择器。

有人知道为什么会这样吗？

最好的问候 亚尼克

编辑：

我的进口：

<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.example 第二个不起作用的代码来自我喜欢的 4.Example。

谁能告诉我为什么这不适用于 4.Example？

Answer 1

感谢您通过电子邮件与我联系。我查看了您的代码并进行了一些更改以解决问题。为了其他可能有类似问题的人，我会在这里跟进，以便我们可以关闭此问题。

问题不在于 ui-view 指令，而在于国家选择器指令。这是更新后的指令代码：

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>

我还将通过电子邮件与您联系，希望这有助于您继续您的项目。

Answer 2

要进行双向绑定工作，您可以修改指令代码如下：

myApp.directive('nationpicker', function ($parse) {
    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();
                });
            });
            scope.$watch('ngModel', function (newVal, oldVal) {
                if (newVal != oldVal) {
                    elem.find("input").val(newVal);
                    elem.find("span.bfh-selectbox-option").empty().append('<i class="glyphicon bfh-flag-' + newVal + '"></i>' + BFHCountriesList[newVal]);
                }
            });


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