angularjs - Bootstrap Switch 停止使用 Angular Routing

Question

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

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

子页面包含带有 Bootstrap 开关和验证的表单，由于某种原因停止工作(开关呈现为常规复选框并且验证不运行 - 请注意我没有使用 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 页面上的 a 中)或直接放在 shell 页面 HTML 中的 somw 代码中发生的事情有什么区别。

Answer 1

我假设您使用的是 this Bootstrap Switch插件。

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

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

问题是它只会将 Bootstrap 开关插件应用到它在第一个页面加载时找到的复选框，而不是在您在 ng-view 中更改页面之后元素。

我建议您改为创建一个简单的 AngularJS 指令，以将 Bootstrap 开关插件应用于复选框。这样做的原因是 Angular 会在您每次更改页面和 link() 时编译 View 的内容。将运行找到的所有指令的功能。因此，如果您的复选框使用此新指令，则它们将始终正确应用插件。

指令可以很简单:

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);
          });
        }
      });
    }
  }
});

然后将 View 中的标记更改为:

<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>

编辑:如果您希望将 Bootstrap 开关应用到应用程序上的所有复选框而不需要额外的属性，您可以改为创建一个将应用于所有<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标记中的属性。

查看我的 working Plunkr example (对于 Angular 示例，Plunkr 是比 jsFiddle 更好的工具，它允许您创建多个 HTML、CSS 和 JS 文件)。

编辑 2: 正如 Mark 所指出的，如果复选框最初被选中，它就会被破坏。这是指令的固定版本(和 updated 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();
        });
      }
    }
  }
});