Angular指令的行为不符合预期。我需要一些帮助找出原因

// <reference path="../../lib/typings/jquery/jquery.d.ts" />
// <reference path="../../lib/typings/angular/angular.d.ts" />
"use strict";

interface ISampler {
    name: string;
    value: string;

    getTemplateFor(file: string): string;
    addA(): void;
    addB(): void;
    clear(): void;
}

class Sampler implements ISampler {
    public name: string = null;
    public value: string = null;

    constructor(public sampler?: ISampler) {
        if (sampler) {
            this.name = sampler.name;
            this.value = sampler.value;
        }
    }

    public getTemplateFor(file: string): string {
        return 'templates/' + name + '/' + file + '.html';
    }

    public addA(): void {
        this.value = 'A';
    }

    public addB(): void {
        this.value = 'B';
    }

    public clear(): void {
        this.value = null;
    }

    static create(name: string): ISampler {
        var samplerClass = name + 'Sampler'
        var items = samplerClass.split('.');

        var creator = (window || this);
        for (var i = 0; i < items.length; i++) {
            creator = creator[items[i]];
        }

        if (typeof creator !== 'function') {
            throw new Error('Class named ' + samplerClass + ' not found.');
        }

        var sampler = new creator(<ISampler>{
            name: name
        });
        if (!(sampler instanceof Sampler)) {
            throw new Error(name + ' is not instance of Sampler.');
        }

        return sampler;
    }
}

app.directive("sampler", ($compile) => {
    return {
        restrict: "E",
        scope: { result: '=' },
        link: ($scope: ng.IScope | any, $element, $attrs) => {
            var name = !$attrs.name ? '' : $attrs.name;
            var sampler = Sampler.create(name);
            $scope.sampler = sampler;
            var template =
'<div class="sampler form-horizontal">' +
'    <sampler-item ng-if="!!sampler.value" sampler="sampler"></sampler-item>' +
'    <sampler-new ng-if="!sampler.value" sampler="sampler"></sampler-new>' +
'</div>';
            if (name) {
                $.ajax({
                    async: false,
                    url: sampler.getTemplateFor('sampler'),
                    success: (response) => { template = response; },
                });
            }
            var newElement = $compile(template)($scope);
            $element.replaceWith(newElement);
            $element = newElement;
            $scope.$watch('sampler.value', () => {
                $scope.result = $scope.sampler.value;
            });
        }
    }
});

app.directive("samplerNew", (ngIfDirective, $compile) => {
    var ngIf = ngIfDirective[0];
    return {
        restrict: "E",
        priority: ngIf.priority + 1,
        terminal: true,
        scope: { sampler: '=' },
        link: ($scope: ng.IScope | any, $element, $attrs) => {
            var sampler = $scope.sampler;
            var comment = '<!-- show: ' + $attrs.show + ' -->';
            var template = '\
<div class="new">\
    <button type="button" class="btn btn-default" ng-click="sampler.addA()">Add A</button>\
    <button type="button" class="btn btn-default" ng-click="sampler.addB()">Add B</button>\
</div>';
            if (sampler.name) {
                $.ajax({
                    async: false,
                    url: sampler.getTemplateFor('new'),
                    success: (response) => { template = response; },
                });
            }
            $scope.$watch($attrs.ngIf, (isVisible) => {
                var newElement = $compile(isVisible ? template : comment)($scope);
                $element.replaceWith(newElement);
                $element = newElement;
            });
        }
    };
});

app.directive("samplerItem", (ngIfDirective, $compile) => {
    var ngIf = ngIfDirective[0];
    return {
        restrict: "E",
        priority: ngIf.priority + 1,
        terminal: true,
        scope: { sampler: '=' },
        link: ($scope: ng.IScope | any, $element, $attrs) => {
            var sampler = $scope.sampler;
            var comment = '<!-- show: ' + $attrs.show + ' -->';
            var template = '\
<div class="item">\
    Item: {{sampler.value}}<br />\
    <button type="button" class="btn btn-default" ng-click="sampler.clear()">Clear</button>\
</div>';
            if (sampler.name) {
                $.ajax({
                    async: false,
                    url: sampler.getTemplateFor('new'),
                    success: (response) => { template = response; },
                });
            }
            $scope.$watch($attrs.ngIf, (isVisible) => {
                var newElement = $compile(isVisible ? template : comment)($scope);
                $element.replaceWith(newElement);
                $element = newElement;
            });
        }
    };
});