Bootstrap Switch停止使用Angular Routing

Question

我刚刚开始学习Angular,并为我的第一个应用程序设置了Angular路由.

我有一个shell页面和一些子页面,例如products.html,help.html等

子页面包含带有引导开关和验证的表单,由于某种原因停止工作(交换机呈现为常规复选框,验证不运行 - 请注意我没有使用Angular JS).

但是,如果将相同代码直接放在shell页面中,则可以正常工作.

如何使子页面的行为与shell页面中的代码完全相同？

基本上,如果我在我的一个子页面help.html中的表单中有以下代码:

        <div class="form-group">
            <label for="active">My checkbox<br />
            <div class="switch">
                <input type="checkbox" value="1" id="active" name="active">
            </div>
        </div>

...交换机无法正确呈现,但如果我将代码直接移动到shell页面,它会正确呈现.

那么在子页面(在shell页面上显示)或直接放在shell页面HTML中的somw代码中发生的事情有什么不同.

Answer 1

我假设你正在使用这个Bootstrap Switch插件.

我还假设您正在通过执行以下操作来初始化在shell页面上工作的开关:

$(function () {
    $('input[type="checkbox"]').bootstrapSwitch();
});

这样做的问题是它只会将引导开关插件应用于它在第一页加载时找到的复选框,而不是在更改ng-view元素中的页面之后.

我建议你做的是创建一个简单的AngularJS指令,将bootstrap switch插件应用于复选框.这将起作用的原因是Angular将在每次更改页面时编译视图的内容,并且link()将运行找到的所有指令的功能.因此,您的复选框,如果他们使用此新指令,将始终正确应用插件.

该指令可以简单如下:

app.directive('bsSwitch', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      $(element).bootstrapSwitch({
        onSwitchChange: function(event, state) {
          scope.$apply(function() {
            ngModelCtrl.$setViewValue(state);
          });
        }
      });
    }
  }
});

然后将视图中的标记更改为:

<div class="form-group">
    <label for="active">My checkbox</label>
    <br />
    <div class="switch">
        <input type="checkbox" value="1" id="active" name="active" bs-switch>
    </div>
</div>

编辑:如果您希望将引导开关应用于应用程序上的所有复选框而无需其他属性,则可以创建一个适用于所有<input>s 的指令,然后检查它们是否为复选框.

像这样:

app.directive('input', function() {
    return {
      restrict: 'E',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModelCtrl) {
        if (attrs.type === 'checkbox')
          $(element).bootstrapSwitch({
            onSwitchChange: function(event, state) {
              scope.$apply(function() {
                ngModelCtrl.$setViewValue(state);
              });
            }
          });
      }
    }
});

然后,您可以省略bs-switch标记中的属性.

请参阅我的工作Plunkr示例(对于Angular示例,Plunkr是比jsFiddle更好的工具,并允许您创建多个HTML,CSS和JS文件).

编辑2:正如马克指出的那样,如果最初检查了复选框,它就会被破坏.这是该指令的固定版本(以及更新的Plunkr):

// As an element directive that will apply to all checkbox inputs:
// <input type="checkbox" ng-model="blah">
app.directive('input', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      if (attrs.type === 'checkbox' && !Object.hasOwnProperty(attrs, 'bsSwitch')) {
        $(element).bootstrapSwitch({
          onSwitchChange: function(event, state) {
            scope.$apply(function() {
              ngModelCtrl.$setViewValue(state);
            });
          }
        });

        var dereg = scope.$watch(function() {
          return ngModelCtrl.$modelValue;
        }, function(newVal) {
          $(element).bootstrapSwitch('state', !! newVal, true);
          dereg();
        });
      }
    }
  }
});