我刚开始学习角，并建立了角路由我的第一个应用程序。

I have just started learning Angular and have set up Angular routing for my first app.

我有一个壳页面和部分子页面，例如将products.html，help.html等

I have a shell page and some sub pages, for example products.html, help.html etc

子页面包含引导开关和验证的形式，由于某种原因停止工作（开关呈现为普通复选框，并确认不运行 - 请注意，我没有使用角度JS）

the sub pages contains forms with bootstrap switches and validation, which for some reason stops working (the switch is rendered as a regular checkbox and validation does not run - please note that I am not using Angular JS).

但是，如果同一code直接的地方在shell页面正常工作。

However, if a place the same code directly in the shell page it works fine.

我如何获得的子页面的行为完全一样，他们在贝页code？

How do I get the sub pages to behave exactly like they the code in the shell page?

基本上，如果我有一个形式如下code在我的子页面help.html之一：

Basically, if I have the following code in a form in one of my subpages 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>

...开关不能正确渲染，但如果我直接将code到shell页它正确渲染。

...the switch does not render correctly, but if I move the code directly to the shell page it renders correctly.

那么就是在副页会发生什么情况，或者被直接放置在壳HTML网页的差（其被示出在一外壳页）somw code

So what is the difference in what happens in the sub page (which is shown in a on the shell page) or somw code that is placed directly in the shell page HTML.

推荐答案

我假设你正在使用此引导开关插件

我也假设你正在做类似的初始化壳页面上的工作开关：

I am also assuming that you are initialising the switches that work on the shell page by doing something like:

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

这里的问题是，它会引导开关插件，只适用于它找到的第一个页面加载的复选框，而不是当你改变了一个内页NG-视图元素。

我推荐什么你做的反而是创建一个简单的AngularJS指令引导开关插件适用于复选框。这将工作的原因是角将每次更改页面和链接发现将要运行的所有指令（）函数时编译视图的内容。因此，你的复选框，如果他们使用这一新指令，将始终有正确应用插件。

What I recommend you do instead is to create a simple AngularJS directive to apply the bootstrap switch plugin to the checkboxes. The reason this will work is that Angular will compile the contents of a view every time you change pages and the link() functions of all the directives found will be run. Thus, your checkboxes, if they use this new directive, will always have the plugin applied correctly.

该指令可以是简单：

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

然后改变你的标记的看法是：

Then change your markup in the views to be:

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

编辑：如果您要引导交换机适用的所有的上，而不需要额外的属性的应用程序的复选框，也可以创建将应用于指令所有的＆LT;输入方式＆gt; s，然后只检查它们是否复选框

If you wish to apply the bootstrap switch to all checkboxes on the application without the need for additional attributes, you could instead create a directive that will apply to all <input>s, and then just check if they are checkboxes.

像这样：

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-开关属性，您的标记。

请参阅我的工作Plunkr例如（Plunkr比的jsfiddle为角的例子一个更好的工具，允许您创建多个HTML，CSS和JS文件）。

See my working Plunkr example (Plunkr is a better tool than jsFiddle for Angular examples, and allows you to create multiple HTML, CSS and JS files).

编辑2：正如马克指​​出，如果该复选框最初选中它被打破。下面是该指令的修正版（和更新Plunkr ）：

EDIT 2: As Mark pointed out, it was broken if the checkbox was initially checked. Here is a fixed version of the directive (and an 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();
        });
      }
    }
  }
});