Javascript angular指令的Jasmine测试失败，因为未编译内部指令。为什么不呢？

这是我的指示：

//Since angular-ui-switch only works for booleans, if you have 0/1 int field, you can use
//this directive (which is just a wrapper around angular-ui-switch) to model the field.
//Use as <int-switch></int-switch>

(function () {
    'use strict';

    angular
        .module('hntb-utils')
        .directive('intSwitch', intSwitch);

    intSwitch.$inject = ['$compile'];

    function intSwitch($compile) {
        return {
            link: link,
            restrict: 'E',
            scope: {
                model: "=ngModel",
                on: '@?',
                off: '@?'
            }
        };

        function link(scope, element, attributes) {
            scope.boolModel = scope.model ? true : false; //{ value: scope.model ? true : false };

            activate();

            function activate() {
                scope.$watch('boolModel', convertToInt);

                scope.on = scope.on || 'On';
                scope.off = scope.off || 'Off';

                var html = '<switch ng-model="boolModel" on="' + scope.on + '" off="' +
                scope.off + '" class="' + attributes.class + '"></switch>';

                element.html(html).show();
                $compile(element.contents())(scope);
            }

            function convertToInt(value) {
                if (arguments.length)
                    scope.model = value ? 1 : 0;
                return scope.model ? true : false;
            }
        }
    }

})();

---

我在ui开关的模板函数中放置了一个断点，它看起来好像没有被执行。我希望在编译指令时编译它。我在

$compile（element.contents（））（scope）上放置了一个断点在int开关的链接函数中，它正在执行。为什么内部指令没有编译？
这是一大堆意大利面代码，有很多反模式的调料。我建议你用更传统的方式和更好的实践来写这篇文章，然后再回来。您可能会发现自己调试更容易，当然对我们来说也是如此。@HarrisWeinstein您能详细介绍一下吗？我想适当地重写，只是不知道哪里出了问题……我会尝试，尽管很难将本质上应该不同的内容融入到评论中。如果可以的话，不要编译HTML。有时，您将使用一个不受控制的API，并且需要使用它返回的HTML，但是，否则，您应该只通过提供模板属性或templateUrl属性向指令/控制器提供HTML。2.不要将jQuery与Angular一起使用。这是一个有问题的拐杖，它常常根本无法达到使用角度的目的。3.提供具有的依赖项。这明确地保证了您正在处理的内容。在接下来的评论中继续…4。对于最简单的模板以外的任何内容，请创建一个静态HTML文件并引用它。使用一个长而零碎的字符串（如
switch
模板）来表示视图，意味着无论您使用什么文本编辑器，都无法帮助您构建和开发布局。此外，以编程方式组装模板的方式似乎毫无意义。Angular的全部要点是，您可以提供一个静态模板，该模板将自身弯曲到您的数据。
describe('directive - intSwitch', function () {

    var intSwitchScope,
        intSwitchEl,
        switchEl,
        switchScope;

    beforeEach(function () {
        module('hntb-utils');

        inject(function ($compile, $rootScope) {

            intSwitchScope = $rootScope.$new();
            intSwitchScope.model = false;

            intSwitchEl = $compile('<int-switch ng-model="model"></int-switch>')(intSwitchScope);
            intSwitchScope.$digest();

            switchEl = intSwitchEl.find('switch');
            switchScope = angular.element(switchEl).scope();

        });
    });

    it("Check that ui-switch has been built and is working.", function () {

        var test = switchEl.children();
        switchEl.children()[0].click();
        intSwitchScope.$digest();
        expect(switchScope && switchScope.boolModel == true).toBeTruthy();
    });

    it("Should track boolean model value and replace integers.", function () {

        expect(intSwitchScope.model == 1).toBeTruthy();
        switchEl.children()[0].click();
        intSwitchScope.$digest();
        expect(intSwitchScope.model == 0).toBeTruthy();
    });
});

angular.module('uiSwitch', [])

.directive('switch', function(){
  return {
    restrict: 'AE'
  , replace: true
  , transclude: true
  , template: function(element, attrs) {
      var html = '';
      html += '<span';
      html +=   ' class="switch' + (attrs.class ? ' ' + attrs.class : '') + '"';
      html +=   attrs.ngModel ? ' ng-click="' + attrs.disabled + ' ? ' + attrs.ngModel + ' : ' + attrs.ngModel + '=!' + attrs.ngModel + (attrs.ngChange ? '; ' + attrs.ngChange + '()"' : '"') : '';
      html +=   ' ng-class="{ checked:' + attrs.ngModel + ', disabled:' + attrs.disabled + ' }"';
      html +=   '>';
      html +=   '<small></small>';
      html +=   '<input type="checkbox"';
      html +=     attrs.id ? ' id="' + attrs.id + '"' : '';
      html +=     attrs.name ? ' name="' + attrs.name + '"' : '';
      html +=     attrs.ngModel ? ' ng-model="' + attrs.ngModel + '"' : '';
      html +=     ' style="display:none" />';
      html +=     '<span class="switch-text">'; /*adding new container for switch text*/
      html +=     attrs.on ? '<span class="on">'+attrs.on+'</span>' : ''; /*switch text on value set by user in directive html markup*/
      html +=     attrs.off ? '<span class="off">'+attrs.off + '</span>' : ' ';  /*switch text off value set by user in directive html markup*/
      html += '</span>';
      return html;
    }
  }
});