javascript - Angular Directive(指令)的行为不符合预期。我需要一些帮助来找出原因

我一直在尝试从指令组合中获得动态行为。这是我用于sampler.js 和index.html 的代码:

"use strict";
var app = angular.module("myApp", []);
var Sampler = (function () {
    function Sampler(sampler) {
        this.sampler = sampler;
        this.name = null;
        this.value = null;
        if (sampler) {
            this.name = sampler.name;
            this.value = sampler.value;
        }
    }
    Sampler.prototype.getTemplateFor = function (file) {
        return 'templates/' + name + '/' + file + '.html';
    };
    Sampler.prototype.addA = function () {
        this.value = 'A';
    };
    Sampler.prototype.addB = function () {
        this.value = 'B';
    };
    Sampler.create = function (name) {
        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({
            name: name
        });
        if (!(sampler instanceof Sampler)) {
            throw new Error(name + ' is not instance of Sampler.');
        }
        return sampler;
    };
    return Sampler;
}());
app.directive("sampler", function ($compile) {
    return {
        restrict: "E",
        scope: { result: '=' },
        link: function (scope, element, attributes) {
            var name = !attributes.name ? '' : attributes.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-new ng-if="!sampler.value" sampler="sampler" />' +
                '</div>';
            if (name) {
                $.ajax({
                    async: false,
                    url: sampler.getTemplateFor('sampler'),
                    success: function (response) { template = response; },
                });
            }
            var content = $compile(template)(scope);
            element.replaceWith(content);
            scope.$watch('sampler.value', function () {
                scope.result = scope.sampler.value;
            });
        }
    };
});
app.directive("samplerNew", function ($compile) {
    return {
        restrict: "E",
        scope: { sampler: '=' },
        link: function (scope, element) {
            var sampler = scope.sampler;
            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: function (response) { template = response; },
                });
            }
            var content = $compile(template)(scope);
            element.replaceWith(content);
        }
    };
});
app.directive("samplerItem", function ($compile) {
    return {
        restrict: "E",
        scope: { sampler: '=' },
        link: function (scope, element) {
            var sampler = scope.sampler;
            var template = '\
<div class="item">\
    Item: {{sampler.value}}\
</div>';
            if (sampler.name) {
                $.ajax({
                    async: false,
                    url: sampler.getTemplateFor('sampler'),
                    success: function (response) { template = response; },
                });
            }
            var content = $compile(template)(scope);
            element.replaceWith(content);
        }
    };
});

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
</head>
<body ng-app="myApp">
    <sampler result="result"></sampler>
    Expression: {{result}}

    <script src="lib/jquery/jquery-3.1.1.js"></script>
    <script src="lib/angular/js/angular.js"></script>
    <script src="js/directives/sampler.js"></script>
</body>
</html>

当页面加载时，输出是: